webpack module federation doesn't work after [email protected]

[farhadnowzari]

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 [email protected]

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 [email protected].
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 [email protected] it seems to be fine and it doesn't need this splitChunks:false

[pparekh088]

Facing the same issue. Any update on this.

[jhfoo]

+1 on the issue and fix. Replicable on FreeBSD with @vue/[email protected]

To clarify: splitChunks is not ideal as it seems to pack unrelated content into remoteEntry.js. File size inefficiency is anecdotally 700kb vs 100kb (webpack demo code)

[jing-wu]

Same issue.Hoping to solve it asap.

[farhadnowzari]

Same issue.Hoping to solve it asap.

I had another issue, I don't know if it has happened to anyone yet.
I will create a proof case for it to test and will create an issue.
with the rc version, it causes problem on Safari almost on all apple devices even if you don't use module federation. it throws an exception and doesn't render the vue app.
So take care.

[AndreiSoroka]

Hi. I usage "@vue/cli-service": "5.0.1"

with splitChunks:false:

remoteEntry.js:1117 Uncaught (in promise) ChunkLoadError: Loading chunk src_views_AboutPage_vue failed.
(missing: http://localhost:8092/js/src_views_AboutPage_vue.js)
while loading "./AboutPage.vue" from webpack/container/reference/rtga

without:

Uncaught (in promise) ScriptExternalLoadError: Loading script failed.
(missing: http://localhost:8091/remoteEntry.js)
while loading "./AboutPage.vue" from webpack/container/reference/rtga

I have 3 projects

• A: new project (vue cli)
• B: new project (vue cli)
• C: https://github.com/module-federation/module-federation-examples/tree/master/vue3-demo/home

Project A:

• vue config

/* eslint-disable @typescript-eslint/no-var-requires */
const { defineConfig } = require('@vue/cli-service');
const webpack = require('webpack');
// const packageJson = require('./package.json');

module.exports = defineConfig({
  pages: {
    index: {
      entry: './src/index.ts',
    },
  },
  configureWebpack: {
    plugins: [
      new webpack.container.ModuleFederationPlugin({
        name: 'test',
        filename: 'remoteEntry.js',
        remotes: {
          home: 'home@http://localhost:3002/remoteEntry.js',
          rtga: 'rtga@http://localhost:8091/remoteEntry.js',
        },
        // eslint-disable-next-line global-require
        // shared: require('./package.json').dependencies,
        shared: {
          vue: {
            singleton: true,
          },
        },
      }),
    ],
  },
});

• AboutPage:

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <hr/>
    <Button />
    <hr/>
    <AboutPage />
  </div>
</template>

<script setup>
import { defineAsyncComponent } from 'vue';

// ERROR
const AboutPage = defineAsyncComponent(() => import('rtga/AboutPage'));

// WORKING!
const Button = defineAsyncComponent(() => import('home/Button'));
</script>

Where is the problem? Here or there module-federation/module-federation-examples#307

[AndreiSoroka]

Hi. I created MR for fix this issue

[xiangxinji]

I also encountered this problem recently and look forward to repairing it

[xuebigshuai]

I also encountered this problem recently and look forward to repairing it. help help help

[GOGOGOSIR]

Hi. I created MR for fix this issue

When I set publicPath: auto , I get 404 when I visit the page

[nuno-barreiro]

Have exactly the same issue/errors that @AndreiSoroka reported in #6823 (comment)

Using Vue2 project. These are my dependencies (same version for consumer and other apps)

 "dependencies": {
    "core-js": "^3.23.5",
    "vue": "~2.6.14"
  },
  "devDependencies": {
    "@babel/core": "^7.18.9",
    "@babel/eslint-parser": "^7.18.9",
    "@vue/cli-plugin-babel": "~5.0.8",
    "@vue/cli-plugin-eslint": "~5.0.8",
    "@vue/cli-service": "~5.0.8",
    "eslint": "^8.20.0",
    "eslint-plugin-vue": "^9.2.0",
    "vue-template-compiler": "^2.7.7",
    "webpack": "^5.73.0"
  },

Setting splitChunks: false did not work out at all.

[bkhatkov2022]

Guys, any progress on the issue?

[phoenix-ru]

For anyone interested, I have a sample repository with both Vue CLI and Nuxt 3 working:
https://github.com/phoenix-ru/nuxt3-module-federation-example