ChunkLoadError: Loading chunk 0 failed in Firefox only!

[aryaroudi]

Version

4.5.8

Environment info

Environment Info:

  System:
    OS: macOS 10.15.7
    CPU: (8) x64 Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz
  Binaries:
    Node: 10.20.1 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.4 - /usr/local/bin/npm
  Browsers:
    Chrome: 86.0.4240.111
    Edge: Not Found
    Firefox: 82.0.2
    Safari: 14.0
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.2.1 
    @vue/babel-helper-vue-transform-on:  1.0.0-rc.2 
    @vue/babel-plugin-jsx:  1.0.0-rc.3 
    @vue/babel-plugin-transform-vue-jsx:  1.2.1 
    @vue/babel-preset-app:  4.5.8 
    @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:  3.12.1 
    @vue/cli-plugin-babel: ^4.2.3 => 4.5.8 
    @vue/cli-plugin-e2e-cypress: ^3.11.0 => 3.12.1 
    @vue/cli-plugin-eslint: ^4.1.2 => 4.5.8 
    @vue/cli-plugin-typescript: ^3.11.0 => 3.12.1 
    @vue/cli-plugin-unit-mocha: ^3.11.0 => 3.12.1 
    @vue/cli-service: 3.11.0 => 3.11.0 
    @vue/cli-shared-utils:  4.5.8 (3.12.1)
    @vue/component-compiler-utils:  3.2.0 
    @vue/eslint-config-prettier: ^6.0.0 => 6.0.0 
    @vue/eslint-config-typescript: ^5.0.2 => 5.1.0 
    @vue/preload-webpack-plugin:  1.1.2 
    @vue/test-utils: 1.0.0-beta.29 => 1.0.0-beta.29 
    @vue/web-component-wrapper:  1.2.0 
    eslint-plugin-vue: ^6.2.2 => 6.2.2 
    typescript: ~3.9.3 => 3.9.7 
    vue: ^2.6.10 => 2.6.12 
    vue-class-component: ^7.1.0 => 7.2.6 
    vue-eslint-parser:  7.1.0 
    vue-excel-export: ^0.1.3 => 0.1.3 
    vue-hot-reload-api:  2.3.4 
    vue-json-excel: ^0.2.98 => 0.2.98 
    vue-loader:  15.9.4 
    vue-property-decorator: ^8.2.2 => 8.5.1 
    vue-router: ^3.1.2 => 3.4.4 
    vue-style-loader:  4.1.2 
    vue-template-compiler: ^2.6.10 => 2.6.12 
    vue-template-es2015-compiler:  1.9.1 
    vuex: ^3.1.1 => 3.5.1 
  npmGlobalPackages:
    @vue/cli: 4.5.8

Steps to reproduce

Making a Library target build with chunks and copy it to another vue project

What is expected?

It should resolve the path of chunks correctly

What is actually happening?

I have a library (made by vue) that is imported to another project. There is a problem with loading the chunks in Mozilla Firefox, I don't know if this is an issue of Mozilla or Webpack because it is working in Chrome (smarter to resolve the path?) without any problem. when it is loading in chrome it uses a wrong path to load the chunk file

ChunkLoadError: Loading chunk 0 failed.

By checking the code I see the publicPath is empty in my library

for some reason that I couldn't figure out, the publicPath in Chrome turns to __webpack_require__.p="https://localhost/" but in Mozilla Firefox, it shows empty:

so it includes the sub route following the https://localhost/ to load the chunks

when I manually change the empty __webpack_require__.p="" to __webpack_require__.p="/" it starts working again.

[fangbinwei]

CLI will inject codes into your lib to overwrite __webpack_require__.p . It seems these code failed to set publicPath in Firefox? Could you try to debug these codes?

[aryaroudi]

CLI will inject codes into your lib to overwrite __webpack_require__.p . It seems these code failed to get publicPath in Firefox? Could you try to debug these codes?

the question is, the empty path "" is correct? and the second question is if it is correct so this can be a Firefox bug that can't determine the empty path correctly?

It seems the output for these lines in the bundle is different in Firefox and Chrome which reassign the path:

and Firefox

more deeply in Chrome:

in Firefox:

[fangbinwei]

I download the latest firefox(82.0.2), It seems firefox native support document.currentScipt on this version. And __webpack_require__.p is correct by my test

[aryaroudi]

I download the latest firefox(82.0.2), It seems firefox native support document.currentScipt on this version. And __webpack_require__.p is correct by my test

seems to be related to this bug #5247 the problem was my NPM cache, it wasn't installing the library package from my new build. After deleting the node modules folder and install the packages from 0 now it is working in firefox. Thanks

[fangbinwei]

Got it. This PR fixes the situation where document.currentScript is null in Firefox.

[aryaroudi]

hey @fangbinwei can you reopen this again? I see the error is still happening in 1 condition even though it is fixed in prod. I updated my Vue CLI to the last version.

When I import the Async components from another Vue Project to another Vue application I see at the beginning it is loading fine and the public path is being resolved correctly but when I navigate to the route that contains an imported component the issue is still there and it is because the CurrentScript is wrong:

it is detecting the first HTML script tag in the DOM as the currentScript, unfortunately, and the issue is coming from this dependency node_modules/@soda/get-current-script/index.js

here he mentioned a valid point, and that's my case actually: ref

[aryaroudi]

Update: I had to build the library of my lazy loading component in a way to set the PublicPath manually by a custom plugin

function PublicPathWebpackPlugin() {}
PublicPathWebpackPlugin.prototype.apply = function(compiler) {
    compiler.hooks.entryOption.tap('PublicPathWebpackPlugin', (context, entry) => {
        if (entry['module.common']) {
            entry['module.common'] = path.resolve(__dirname, './src/main.js');
        }
        if (entry['module.umd']) {
            entry['module.umd'] = path.resolve(__dirname, './src/main.js');
        }
        if (entry['module.umd.min']) {
            entry['module.umd.min'] = path.resolve(__dirname, './src/main.js');
        }
    });
    compiler.hooks.beforeRun.tap('PublicPathWebpackPlugin', compiler => {
        compiler.options.output.publicPath = ASSET_PATH;
    });
};

....

if (process.env.VUE_APP_TARGET === 'component') {
            config.plugins.unshift(new PublicPathWebpackPlugin());
        }