Issue when used dynamic import in JS with magic comments webpackPrefetch

pavelloz commented 7 months ago

Current behaviour

When i try to use two prefetched chunks, i get this error:

$ cross-env NODE_ENV=production webpack
assets by status 4.38 KiB [cached] 4 assets
Entrypoint __bundler-plugin-entry__index =
Entrypoint app = app.js
runtime modules 17.1 KiB 24 modules
cacheable modules 33.8 KiB (javascript) 31.3 KiB (asset)
  modules by path ./src/js/*.js 835 bytes
    ./src/js/app.js 472 bytes [built] [code generated]
    ./src/js/log.js 74 bytes [built] [code generated]
    ./src/js/deferred.js 92 bytes [built] [code generated]
    ./src/js/prefetched.js 95 bytes [built] [code generated]
    ./src/js/prefetched-delayed.js 102 bytes [built] [code generated]
  ./src/index.html 9.3 KiB [built] [code generated]
  ./src/static/favicon.ico 42 bytes (javascript) 31.3 KiB (asset) [built] [code generated]
  ./src/css/app.css 23.7 KiB [built] [code generated]

ERROR in [entry] [initial]
Cannot read properties of undefined (reading 'filename')
TypeError: Cannot read properties of undefined (reading 'filename')
    at HtmlBundlerPlugin.createAssetModule (/Users/pavel/projects/webpack-tailwindcss/node_modules/.pnpm/html-bundler-webpack-plugin@3.8.0_webpack@5.91.0/node_modules/html-bundler-webpack-plugin/src/Plugin/AssetCompiler.js:971:93)
    at HtmlBundlerPlugin.renderManifest (/Users/pavel/projects/webpack-tailwindcss/node_modules/.pnpm/html-bundler-webpack-plugin@3.8.0_webpack@5.91.0/node_modules/html-bundler-webpack-plugin/src/Plugin/AssetCompiler.js:847:36)
    at Hook.eval [as call] (eval at create (/Users/pavel/projects/webpack-tailwindcss/node_modules/.pnpm/tapable@2.2.1/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:16)
    at Hook.CALL_DELEGATE [as _call] (/Users/pavel/projects/webpack-tailwindcss/node_modules/.pnpm/tapable@2.2.1/node_modules/tapable/lib/Hook.js:14:14)
    at Compilation.getRenderManifest (/Users/pavel/projects/webpack-tailwindcss/node_modules/.pnpm/webpack@5.91.0_webpack-cli@5.1.4/node_modules/webpack/lib/Compilation.js:4689:36)
    at /Users/pavel/projects/webpack-tailwindcss/node_modules/.pnpm/webpack@5.91.0_webpack-cli@5.1.4/node_modules/webpack/lib/Compilation.js:4709:22
    at symbolIterator (/Users/pavel/projects/webpack-tailwindcss/node_modules/.pnpm/neo-async@2.6.2/node_modules/neo-async/async.js:3482:9)
    at timesSync (/Users/pavel/projects/webpack-tailwindcss/node_modules/.pnpm/neo-async@2.6.2/node_modules/neo-async/async.js:2297:7)
    at Object.eachLimit (/Users/pavel/projects/webpack-tailwindcss/node_modules/.pnpm/neo-async@2.6.2/node_modules/neo-async/async.js:3463:5)
    at Compilation.createChunkAssets (/Users/pavel/projects/webpack-tailwindcss/node_modules/.pnpm/webpack@5.91.0_webpack-cli@5.1.4/node_modules/webpack/lib/Compilation.js:4702:12)

 HTML Bundler Plugin  ▶▶▶ (webpack 5.91.0) compiled with 1 error in 527 ms

Note:

There is no filename: in the config, but adding it does not help.

Reproduction Example

Uncomment lines 5-7 and run npm run build to see the error. https://github.com/pavelloz/webpack-tailwindcss/blob/7d9bd8d22589a84f0a916faa3bd3686ae7f01f52/src/js/app.js#L4-L15

The problematic code looks like this:

import(/* webpackChunkName: "prefetched", webpackPrefetch: true */ './prefetched').then(({ default: run }) => {
   run();
});

import(/* webpackChunkName: "prefetched-delayed", webpackPrefetch: true */ './prefetched-delayed').then(
  ({ default: run }) => {
    setTimeout(() => {
      run();
    }, 2000);
  }
);

Environment

OS: [macOS, Linux, Windows]
version of Node.js: 20
version of Webpack: 5.91
version of the Plugin: 3.8.0

webdiscus commented 7 months ago

Hello @pavelloz,

I try to fix it. Thanks for the issue report.

webdiscus commented 7 months ago

@pavelloz

the issue is fixed in the version 3.9.1

webdiscus commented 7 months ago

@pavelloz

The tipp

define the chunkFilename in the js.chunkFilename plugin option:

new HtmlBundlerPlugin({
      // Documentation: https://github.com/webdiscus/html-bundler-webpack-plugin
      entry: 'src/',
      js: {
        chunkFilename: '[name].[chunkhash:4].js', // <= define this option here (the same as output.chunkFilename)
        inline: production, // inline JS for production mode, extract JS file for development mode
      },
      css: {
        inline: production, // inline CSS for production mode, extract CSS file for development mode
      },
      minify: 'auto', // minify html
    }),

pavelloz commented 7 months ago

the issue is fixed in the version 3.9.1

I confirm - issue is fixed on my side 👍

Thank you :)

The tipp

Thanks, I will experiment with it :)

webdiscus / html-bundler-webpack-plugin