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

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

[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.