webpack module federation doesn't work after vue-cli@5.0.0-beta.3

Version

5.0.0-rc.0

Reproduction link

github.com

Environment info

  System:
    OS: Windows 10 10.0.18363
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
  Binaries:
    Node: 14.17.4 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.17 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 7.24.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 95.0.4638.69
    Edge: Spartan (44.18362.1533.0)
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

serve the app-one project. server the consumer project. open the consumer server. You will see that it says it cannot load the remoteScript which probably is because of an error in the generated script and it doesn’t happen in vue-cli@5.0.0-beta.3

What is expected?

It is expected that the remote script runs to the end and initiate the remote namespace to be used inside the consumer project.

What is actually happening?

The remote namespace at the end of the script is always undefined. this part is also probably generated by webpack but I think the error is happening where vue-cli injects some additional codes in there right before the last line.

---

I have also a working example which you can check https://github.com/farhadnowzari/vue-cli-module-federation-working-example.

[einavk]

Hi, I’m having a similar issue, might be the same problem. I created 4 projects from scratch.

1. 2 projects created using "vue create " cli command
2. 2 projects using webpack directly and not via vue-cli-service.

The 2 that were created by vue-cli are not working with vue-cli 5.0.0. rc.0, and the 2 that are not are working perfectly fine.

I started with vue-cli 5.0.0. rc.0 and then I tried switching to the beta-3 version suggested here and got it to work.

That being said, I only managed to get this working on vue-cli-service using defineAsyncComponent, however, on the other non cli created projects, I had no problem using regular import…

The configuration provided for the host app in vue.config.js:

const path = require("path");
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
module.exports = {
    filenameHashing: false,
    publicPath: "http://localhost:3200/",
    configureWebpack: {
        plugins: [
            new ModuleFederationPlugin({
                name: "starter2",
                filename: "remoteEntry.js",
                remotes: {},
                exposes: {
                    "./HeaderTest": "./src/components/HeaderTest",
                },
            }),
        ],
    },
};

The configuration provided for the consumer app in vue.config.js:

const path = require("path");
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
module.exports = {
    filenameHashing: false,
    publicPath: "http://localhost:3100/",
    configureWebpack: {
        plugins: [
            new ModuleFederationPlugin({
                name: "starter",
                filename: "remoteEntry.js",
                remotes: {
                    starter2: "starter2@http://localhost:3200/remoteEntry.js",
                },
                exposes: {},
            }),
        ],
    },
};

I’m getting the following error:

Uncaught TypeError: Cannot read properties of undefined (reading 'call')
    at __webpack_require__ (app.js:311)
    at fn (app.js:556)
    at eval (index.js??clonedRuleSet-40.use[0]!./node_modules/cache-loader/dist/cjs.js??ruleSet[0].use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[1]!./src/components/HelloWorld.vue?vue&type=script&lang=js:2)
    at Module../node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/cache-loader/dist/cjs.js??ruleSet[0].use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[1]!./src/components/HelloWorld.vue?vue&type=script&lang=js (app.js:30)
    at __webpack_require__ (app.js:311)
    at fn (app.js:556)
    at eval (HelloWorld.vue?vue&type=script&lang=js:5)
    at Module../src/components/HelloWorld.vue?vue&type=script&lang=js (app.js:140)
    at __webpack_require__ (app.js:311)
    at fn (app.js:556)

[farhadnowzari]

I got it to work with vue-cli@5.0.0-rc.0. I have opened an issue also on stackoverflow and this answer did the job. https://stackoverflow.com/a/69900302/14206887

So the consumer’s app vue.config.js configureWebpack section looks like this:

configureWebpack: {
    optimization: {
      splitChunks: false
    },
    plugins: [
      new ModuleFederationPlugin({
        name: "app_one",
        filename: "remoteEntry.js",
        exposes: {
          "./ButtonBase": "./src/components/ButtonBase.vue"
        },
        shared: require("./package.json").dependencies
      })
    ]
  },

Note the optimization property where the splitChunks is set to false

Now the question, is it a webpack issue or a vue-cli issue? because on vue-cli@5.0.0-bete.3 it seems to be fine and it doesn’t need this splitChunks:false