When I use vue/cli: 5.0.0-rc1 creating a project and using module Federation, there was a problem with hot update

[erdong0604]

Version

5.0.0-rc.1

Reproduction link

github.com

Environment info

System:
    OS: macOS 11.4
    CPU: (8) x64 Apple M1
  Binaries:
    Node: 14.16.0 - /usr/local/bin/node
    Yarn: Not Found
    npm: 6.14.11 - /usr/local/bin/npm
  Browsers:
    Chrome: 97.0.4692.71
    Edge: Not Found
    Firefox: Not Found
    Safari: 14.1.1
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.2.1 
    @vue/babel-helper-vue-transform-on:  1.0.2 
    @vue/babel-plugin-jsx:  1.1.1 
    @vue/babel-plugin-transform-vue-jsx:  1.2.1 
    @vue/babel-preset-app:  5.0.0-rc.1 
    @vue/babel-preset-jsx:  1.2.4 
    @vue/babel-sugar-composition-api-inject-h:  1.2.1 
    @vue/babel-sugar-composition-api-render-instance:  1.2.4 
    @vue/babel-sugar-functional-vue:  1.2.2 
    @vue/babel-sugar-inject-h:  1.2.2 
    @vue/babel-sugar-v-model:  1.2.3 
    @vue/babel-sugar-v-on:  1.2.3 
    @vue/cli-overlay:  5.0.0-rc.1 
    @vue/cli-plugin-babel: ~5.0.0-rc.1 => 5.0.0-rc.1 
    @vue/cli-plugin-eslint: ~5.0.0-rc.1 => 5.0.0-rc.1 
    @vue/cli-plugin-router: ~5.0.0-rc.1 => 5.0.0-rc.1 
    @vue/cli-plugin-typescript: ~5.0.0-rc.1 => 5.0.0-rc.1 
    @vue/cli-plugin-vuex: ~5.0.0-rc.1 => 5.0.0-rc.1 
    @vue/cli-service: ~5.0.0-rc.1 => 5.0.0-rc.1 
    @vue/cli-shared-utils:  5.0.0-rc.1 
    @vue/component-compiler-utils:  3.3.0 
    @vue/eslint-config-typescript: ^9.1.0 => 9.1.0 
    @vue/web-component-wrapper:  1.3.0 
    eslint-plugin-vue: ^8.0.3 => 8.2.0 
    typescript: ~4.1.5 => 4.1.6 
    vue: ^2.6.14 => 2.6.14 
    vue-class-component: ^7.2.3 => 7.2.6 
    vue-eslint-parser:  8.0.1 
    vue-hot-reload-api:  2.3.4 
    vue-loader:  16.8.3 (15.9.8)
    vue-property-decorator: ^9.1.2 => 9.1.2 
    vue-router: ^3.5.1 => 3.5.3 
    vue-style-loader:  4.1.3 
    vue-template-compiler: ^2.6.14 => 2.6.14 
    vue-template-es2015-compiler:  1.9.1 
    vuex: ^3.6.2 => 3.6.2 
  npmGlobalPackages:
    @vue/cli: 5.0.0-rc.1

Steps to reproduce

When I modify the HTML content and save it, the console reports the following error.

remoteEntry.js:2779 Uncaught TypeError: Cannot set properties of undefined (setting './node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"6abb76a0-vue-loader-template"}!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./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/App.vue?vue&type=template&id=7ba5bd90&')
    at webpackHotUpdatevue_demo_2 (remoteEntry.js:2779:39)
    at src_bootstrap_ts.9881d289310e02fc.hot-update.js:10:74

What is expected?

The browser changes when HTML content is modified and saved

What is actually happening?

When the HTML content is modified and saved, the browser does not change, and an error is reported on the console

[schirrel]

Happens to me too, any update?

[erdong0604]

No.

[jcmillett]

I have this same issue. HMR doesn't work when using the module federation plugin. If I comment out the plugin in my vue.config.js file, then HMR works as expected.

[Protagonistss]

it should be able to resolve your problem. you can try it. https://www.npmjs.com/package/@module-federation/fmr

[jcmillett]

I think this is happening because the remoteEntry.js file is auto-injected into the html page. I tried to use html-webpack-skip-assets-plugin to remove it, but it didn't work for some reason. The remoteEntry.js file still ends up in the index.html file.

[FranzenD]

I think this is happening because the remoteEntry.js file is auto-injected into the html page. I tried to use html-webpack-skip-assets-plugin to remove it, but it didn't work for some reason. The remoteEntry.js file still ends up in the index.html file.

I fixed this by just specifying what chunks to be injected in the webpack config (HtmlWebpackPlugin chunks option). In my case I just render the 'app' chunk and that omits remoteEntry.js injection in the html page.