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

farhadnowzari commented 3 years ago

Version

5.0.0-rc.0

Reproduction link

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 commented 3 years ago

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 commented 3 years ago

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

pparekh088 commented 2 years ago

Facing the same issue. Any update on this.

jhfoo commented 2 years ago

+1 on the issue and fix. Replicable on FreeBSD with @vue/cli@5.0.0-rc.1

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 commented 2 years ago

Same issue.Hoping to solve it asap.

farhadnowzari commented 2 years ago

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 commented 2 years ago

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:
```vue
<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 https://github.com/module-federation/module-federation-examples/issues/307

AndreiSoroka commented 2 years ago

Hi. I created MR for fix this issue

xiangxinji commented 2 years ago

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

xuebigshuai commented 2 years ago

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

GOGOGOSIR commented 2 years ago

Hi. I created MR for fix this issue

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

nuno-barreiro commented 2 years ago

Have exactly the same issue/errors that @AndreiSoroka reported in https://github.com/vuejs/vue-cli/issues/6823#issuecomment-1046140176

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 commented 1 year ago

Guys, any progress on the issue?

phoenix-ru commented 10 months ago

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

vuejs / vue-cli