"installedCssChunks is not defined" after 2.9.0 update

michaelfaith commented 3 weeks ago

After upgrading from 2.8.1 to 2.9.0 (and then 2.9.1), we're seeing this error repeatedly in the Chrome dev console. We didn't change any aspect of our config or css loading set-up.

I believe this is related to this change: https://github.com/webpack-contrib/mini-css-extract-plugin/pull/1043

Plugin config

...
  {
        test: /\.less$/,
        include: [path.join(appDirectory, 'stylesheets')],
        exclude: [],
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              sourceMap: DEV,
            },
          },
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [require('autoprefixer')],
              },
              sourceMap: DEV,
            },
          },

          {
            loader: 'less-loader',
            options: {
              lessOptions: {
                math: 'always',
              },
              sourceMap: DEV,
            },
          },
        ],
      },
...
plugins: [
   ...
  new MiniCssExtractPlugin({
      experimentalUseImportModule: true,
      filename: '[name].[contenthash:20].css',
    }),
  ...
]

Please paste the results of `npx webpack-cli info` here, and mention other relevant information

System:
    OS: macOS 14.6.1
    CPU: (12) arm64 Apple M3 Pro
    Memory: 1.10 GB / 36.00 GB
  Binaries:
    Node: 20.12.2 - ~/.nvm/versions/node/v20.12.2/bin/node
    npm: 10.8.2 - ~/.nvm/versions/node/v20.12.2/bin/npm
  Browsers:
    Chrome: 127.0.6533.120
    Safari: 17.6
  Packages:
    babel-loader: ^9.1.3 => 9.1.3 
    css-loader: ^6.11.0 => 6.11.0 
    expose-loader: ^5.0.0 => 5.0.0 
    json-loader: ~0.5.7 => 0.5.7 
    less-loader: ^12.2.0 => 12.2.0 
    postcss-loader: ^8.1.1 => 8.1.1 
    source-map-loader: ^5.0.0 => 5.0.0 
    style-loader: ^4.0.0 => 4.0.0 
    webpack: ^5.93.0 => 5.93.0 
    webpack-cli: ^5.1.4 => 5.1.4

alexander-akait commented 3 weeks ago

Please create reproducible test repo, otherwise I can't help, thank you

lukpsaxo commented 2 weeks ago

We are also seeing the issue, in watch mode only and only on certain usage patterns of split bundles. We will try and help with more info by debugging within a few weeks unless someone beats us to it.

michaelfaith commented 2 weeks ago

We will try and help with more info by debugging within a few weeks unless someone beats us to it.

Thanks, that would be super helpful. We're in a large private monorepo, and it'll be a bit before I can try and create a public repro to share.

alexander-akait commented 1 week ago

Yeah, I am glad to help with it, but wihtour more information, it is hard, it happends only in 2.9.0?

michaelfaith commented 1 week ago

Yeah, I am glad to help with it, but wihtour more information, it is hard, it happends only in 2.9.0?

I appreciate it. Yes, we were on 2.8.1 for a while without issue. This only started happening after updating to 2.9, and I believe it's related to that change I linked specifically.

alexander-akait commented 1 week ago

I think it can be due it - https://github.com/webpack-contrib/mini-css-extract-plugin/commit/ee25e51a8d06292dd8643f5bf1d6c4faa51c4f4c, do you have Preload or Prefetch for you dynamic chunks?

alexander-akait commented 1 week ago

Looks like withPrefetch && hasCssMatcher or withPreload && hasCssMatcher is true, but it should happens, can you try to debug it locally?

michaelfaith commented 1 week ago

For sure, I can debug it locally. I'll have to set that branch back up, but that won't take a long.

michaelfaith commented 1 week ago

We aren't doing any prefetching ourselves, but from what I can tell, this seems to always be breaking on a chunk that's coming from a library we're using that's calling import with webpackPrefetch: true. That chunkId seems to always be the one that's going through this mini-css code where installedCssChunks is undefined:

The library in question is just passing the import function into React.lazy. We're not preloading / prefetching our css chunks at all.

alexander-akait commented 1 week ago

@michaelfaith Maybe you can try to create reproducible test repo with this library, look like you have CSS chunks before, but then it was removed for bundle, but runtime code already was created

webpack-contrib / mini-css-extract-plugin