CODEWITHSUNDEEP
webpackvuejs2webpack-module-federation
Farhad Nowzari
Farhad Nowzari

Reputation: 109

ScriptExternalLoadError: Loading script failed. [email protected]

We are trying microfrontends with ModuleFederationPlugin from Webpack 5.61.0 . I feel so helpless. I'm using @vue/[email protected]. The vue.config.js which exposes its modules looks like below,

const ModuleFederationPlugin =  require("webpack/lib/container/ModuleFederationPlugin");
const { defineConfig } = require('@vue/cli-service');
module.exports = defineConfig({
  publicPath: "http://localhost:8080/",
  configureWebpack: {
    plugins: [
      new ModuleFederationPlugin({
        name: "items",
        filename: "remoteEntry.js",
        exposes: {
          "./ItemsBase": "./src/components/ItemsBase.vue"
        },
        shared: require("./package.json").dependencies
      })
    ]
  },
  transpileDependencies: [
    'vuetify'
  ]
})

And the consumer's vue.config.js looks like this,

const ModuleFederationPlugin =  require("webpack/lib/container/ModuleFederationPlugin");
const { defineConfig } = require('@vue/cli-service');
module.exports = defineConfig({
  publicPath: "http://localhost:8081/",
  configureWebpack: {
    plugins: [
      new ModuleFederationPlugin({
        name: "my_shop",
        filename: "remoteEntry.js",
        remotes: {
          "items": "items@http://localhost:8080/remoteEntry.js"
        },
        shared: require("./package.json").dependencies
      })
    ]
  },
  transpileDependencies: [
    'vuetify'
  ]
})

I have the bootstrap.js in both projects an I'm importing it like import('./bootstrap') from main.js On the consumer project we are trying to import the remote component like this.

<template>
  <div class="home">
    <ItemsBase></ItemsBase>
  </div>
</template>

<script>
// @ is an alias to /src
export default {
  name: 'HomeView',
  components: {
    ItemsBase: () => import("items/ItemsBase")
  }
}
</script>

And this mix is based on webpack examples with vue-cli: https://github.com/module-federation/module-federation-examples/tree/master/vue-cli

The only difference is that they are using [email protected] but both have same webpack version(my prototypes and webpack samples).

Now the interesting part is that I'm getting the following error in the consumer project.

ScriptExternalLoadError: Loading script failed

any ideas?

Edit: Another difference is that the vue-cli sample from webpack is using yarn and I'm using npm which is just irrelevant but thought maybe it worths mentioning because their example works!!!

Edite: The issue is being followed on github

https://github.com/vuejs/vue-cli/issues/6823

Upvotes: 0

Views: 4134

Answers (3)

Vladimir Yel
Vladimir Yel

Reputation: 589

Final answer ( working ) :

Tried to play with versions, went over all issues, debugged the loader, bought a new keyboard...

The issue was around splitChunks...

Eventually this is my vue.config:

const { defineConfig } = require('@vue/cli-service');
const { ModuleFederationPlugin } = require('webpack').container;

module.exports = defineConfig({
  transpileDependencies: true,
  publicPath: "http://localhost:4300/",
  configureWebpack: {
    optimization: {
      splitChunks: false
    },
    plugins: [
      new ModuleFederationPlugin({
        name: 'vueApp',
        filename: 'remoteEntry.js',
        exposes: {
          './vueApp': './src/main.js',
        },
      }),
    ],
  },
  devServer: {
    port: 4300,
  },
});

Vue package.json:

"dependencies": {
    "core-js": "^3.8.3",
    "vue": "^3.2.13"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "webpack": "^5.97.1",
    "webpack-cli": "^6.0.1",
    "webpack-dev-server": "^5.2.0"
  },

my webpack.config in container ( aka shell, aka provider, aka mainApp )

 new ModuleFederationPlugin({
      name: 'container',
      remotes: {
        angularApp: 'angularApp@http://localhost:4100/remoteEntry.js',
        reactApp: 'reactApp@http://localhost:4200/remoteEntry.js',
        vueApp: 'vueApp@http://localhost:4300/remoteEntry.js',
      },
    }),

Upvotes: 0

tpliakas
tpliakas

Reputation: 1129

I had the same problem and got it to work with [email protected]. What i did was to delete the splitChunks before loading the MF like this:

config.optimization.delete('splitChunks');

Upvotes: 2

Farhad Nowzari
Farhad Nowzari

Reputation: 109

Well I found out why this is happening. I opened an issue in github on vue-cli. https://github.com/vuejs/vue-cli/issues/6823

On Saturday(06.11) the [email protected] release on npm and well with npm I could not again create a new vue app for any of the vue-cli versions. because it adds the version 5.0.0 of each packages in package.json and apparently they don't exist in npm but it works with yarn. I could not get the module federation to work with [email protected] but as used in the webpack example for vue-cli I could get it to work with [email protected].

Upvotes: 0

Related Questions