Vue 2 with Webpack module federation

Question

I am using Vue 2 and I am creating two new projects with the vue cli 4. I am selecting the default choice for creating the projects from the cli. I have created a vue.config.js file in both projects and I have inserted the following codes. The host project:

 const ModuleFederationPlugin =
   require("webpack").container.ModuleFederationPlugin;

 module.exports = {
   publicPath: "http://localhost:8001/",
   configureWebpack: {
     plugins: [
       new ModuleFederationPlugin({
         name: "consumer",
         filename: "remoteEntry.js",
         remotes: {
           host: "host@http://localhost:8000/remoteEntry.js",
         },
       }),
     ],
   },
   devServer: {
     port: 8001,
   },
 };

The remote project:

 const ModuleFederationPlugin =
   require("webpack").container.ModuleFederationPlugin;

 module.exports = {
   publicPath: "http://localhost:8000/",
   configureWebpack: {
     plugins: [
       new ModuleFederationPlugin({
         name: "host",
         filename: "remoteEntry.js",
         exposes: {
           "./HelloWorld": "./src/components/HelloWorld",
         },
       }),
     ],
   },
   devServer: {
     port: 8000,
   },
 };

My package.json file is this:

{
  "name": "rep1",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^3.0.0",
    "webpack": "^5.51.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

I get the following error when I try to build the project with npm.

 ERROR  TypeError: Cannot read property 'includes' of undefined
TypeError: Cannot read property 'includes' of undefined
    at ModuleFederationPlugin.apply (/Users/georgex/Documents/rep1/node_modules/webpack/lib/container/ModuleFederationPlugin.js:52:49)
    at webpack (/Users/georgex/Documents/rep1/node_modules/@vue/cli-service/node_modules/webpack/lib/webpack.js:51:13)
    at serve (/Users/georgex/Documents/rep1/node_modules/@vue/cli-service/lib/commands/serve.js:163:22)
    at processTicksAndRejections (internal/process/task_queues.js:95:5)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! rep1@0.1.0 serve: `vue-cli-service serve`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the rep1@0.1.0 serve script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/georgex/.npm/_logs/2021-08-19T12_15_48_053Z-debug.log

Answer 1

Please update your Vue CLI version to 5.x.x, as the Webpack version inside @vue/cli-service version 4.x.x is 4.x.x.

"@vue/babel-preset-app": "5.0.0-beta.2",
"@vue/cli-plugin-babel": "5.0.0-beta.2",
"@vue/cli-plugin-eslint": "5.0.0-beta.2",
"@vue/cli-service": "5.0.0-beta.2",