配置模块联合时，热模块（HMR）不起作用，vue-cli@5.0.0-rc.0答案

【问题标题】：Hot Module (HMR) doesnt work when config ModuleFederation, vue-cli@5.0.0-rc.0配置模块联合时，热模块（HMR）不起作用，vue-cli@5.0.0-rc.0
【发布时间】：2022-06-13 12:09:05
【问题描述】：

我正在研究 Webpack 5 模块联合功能，幸运的是，它在我的项目中有效，但我无法理解为什么我的热模块替换 (HMR) 不起作用，错误：

Uncaught TypeError: Cannot set properties of undefined (setting './node_modules/@vue/cli-plugin-babel/node_modules/babel-loader/lib/index.js??clonedRuleSet-40[0].rules[0].use[0]!./node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js??ruleSet[0].rules[0].use[0]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/layout/components/NavBar.vue?vue&type=script&lang=js&')
    at webpackHotUpdatevue2_cli5 (remoteEntry.js:2884)
    at app.5c4dd6501efc06e4.hot-update.js:10

我感到很无助。我正在使用@vue/cli@5.0.0-rc.0。暴露其模块的 vue.config.js 如下所示，

module.exports = {
  publicPath: 'http://localhost:8084/',
  chainWebpack: (config) => {
    config
      .plugin('module-federation-plugin')
      .use(require('webpack').container.ModuleFederationPlugin, [{
        name: "home",
        filename: "remoteEntry.js",
        exposes: {
          './HelloWorld': './src/components/HelloWorld.vue'
        },
        shared: {
          vuex: {
            eager: true,
            singleton: true,
          },
        },
    }])
  },

  devServer: {
    port: 8084,
    hot: true,
    headers: {
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
      "Access-Control-Allow-Headers":
        "X-Requested-With, content-type, Authorization",
    }
  }
}

【问题讨论】：

标签： vuejs2 vue-cli webpack-module-federation

【解决方案1】：

我遇到了同样的问题。使用相同的 vue-cli@5 和 webpack moduleFederation

【讨论】：