Have you used AI?
Yes
Bug Description
I believe v5.108 introduces a regression in HMR code generation for CSS modules. The issue does not seem easily reproducible wit a minimal example because it requires that you you style-loader + css-loader, use css modules and have a large enough project to use chunk splitting.
The stack trace for the issue is:
TypeError: Invalid value used as weak map key
at WeakMap.set (<anonymous>)
at ChunkGraph._getChunkGraphModule (ChunkGraph.js:334)
at ChunkGraph.getModuleId (ChunkGraph.js:1528)
at getDependencyModuleId (HarmonyAcceptDependency.js:100)
at isRelatedHarmonyImportDependency (HarmonyAcceptDependency.js:113)
at getHarmonyImportDependencies (HarmonyAcceptDependency.js:132)
at HarmonyAcceptDependencyTemplate.apply (HarmonyAcceptDependency.js:165)
at JavascriptGenerator.generate (JavascriptGenerator.js:274)
It seems that moduleGraph.getModule(dependency) can return null and chunkGraph.getModuleId is called unconditionally with the result of moduleGraph.getModule(dependency) which causes the error.
Link to Minimal Reproduction and step to reproduce
Unfortunately I can't provide my entire configuration because it is somewhat proprietary to my company, but I think the salient points are that my configuration for css files is:
{
test : /\.css$/,
exclude : [ /global-style\.css$/ ],
use : [
'style-loader',
// MiniCssExtractPlugin.loader,
{
loader : require.resolve( 'css-loader' ),
options : {
modules : {
localIdentName : '[local]_[modulehash:base64:5]',
namedExport : false,
exportLocalsConvention : 'as-is'
},
importLoaders : 1
}
},
require.resolve( 'postcss-loader' )
]
}and my chunk splitting configuration is:
optimization : {
splitChunks : {
chunks : 'all',
minSize : 20000,
maxSize : 70000,
minChunks : 1,
maxAsyncRequests : 30,
maxInitialRequests : 30,
automaticNameDelimiter : '~',
cacheGroups : {
vendor : {
test : /[\\/]node_modules[\\/]/,
name( module ) {
const packageName = module.context.match( /[\\/]node_modules[\\/](.*?)([\\/]|$)/ )[1]
return `npm.${packageName.replace( '@', '' )}`
},
},
},
},
runtimeChunk : 'single', // runtime separate for caching
},Attempting to run my app using HMR and webpack-dev-server results in TypeError: Invalid value used as weak map key for each css module file.
Expected Behavior
App compiles cleanly with no errors and serves with HMR.
Actual Behavior
An error is throw for each css modules file:
TypeError: Invalid value used as weak map key
and compilation fails.
Environment
⬡ webpack info
────────────────────────────────────────────────────────────────────────
System and environment information.
⬡ System:
────────────────────────────────────────────────────────────────────────
OS: macOS 26.5.1
CPU: (18) arm64 Apple M5 Max
Memory: 2.73 GB / 48.00 GB
⬡ Binaries:
────────────────────────────────────────────────────────────────────────
Node: 24.18.0 - /usr/local/bin/node
Yarn: 4.17.0 - /usr/local/bin/yarn
npm: 11.16.0 - /usr/local/bin/npm
⬡ Browsers:
────────────────────────────────────────────────────────────────────────
Chrome: 149.0.7827.54
Safari: 26.5
⬡ Packages:
────────────────────────────────────────────────────────────────────────
babel-loader: ^10.1.1 → 10.1.1
babel-loader-exclude-node-modules-except: ^1.2.4 → 1.2.4
css-loader: ^7.1.4 → 7.1.4
css-minimizer-webpack-plugin: ^8.0.0 → 8.0.0
dotenv-webpack: ^9.0.0 → 9.0.0
html-webpack-plugin: ^5.6.7 → 5.6.7
node-polyfill-webpack-plugin: ^4.1.0 → 4.1.0
postcss-loader: ^8.2.1 → 8.2.1
react-compiler-webpack: ^1.0.1 → 1.0.1
resource-hints-webpack-plugin: ^0.0.2 → 0.0.2
source-map-loader: ^5.0.0 → 5.0.0
style-loader: ^4.0.0 → 4.0.0
terser-webpack-plugin: ^5.6.1 → 5.6.1
thread-loader: ^4.0.4 → 4.0.4
webpack: ^5.107.2 → 5.108.2
webpack-cli: ^7.0.3 → 7.1.0
webpack-dev-server: ^5.2.4 → 5.2.5
webpack-merge: ^6.0.1 → 6.0.1
webpack-node-externals: ^3.0.0 → 3.0.0
workbox-webpack-plugin: ^7.4.1 → 7.4.1
────────────────────────────────────────────────────────────────────────
ℹ Run 'webpack --help=verbose' to see all available commands and options.
Webpack documentation: https://webpack.js.org/
CLI documentation: https://webpack.js.org/api/cli/
Made with ♥ by the webpack team
Is this a regression?
Yes (please specify version below)
Last Working Version
v5.107.2
Additional Context
No response
Have you used AI?
Yes
Bug Description
I believe v5.108 introduces a regression in HMR code generation for CSS modules. The issue does not seem easily reproducible wit a minimal example because it requires that you you style-loader + css-loader, use css modules and have a large enough project to use chunk splitting.
The stack trace for the issue is:
It seems that
moduleGraph.getModule(dependency)can return null andchunkGraph.getModuleIdis called unconditionally with the result ofmoduleGraph.getModule(dependency)which causes the error.Link to Minimal Reproduction and step to reproduce
Unfortunately I can't provide my entire configuration because it is somewhat proprietary to my company, but I think the salient points are that my configuration for css files is:
and my chunk splitting configuration is:
Attempting to run my app using HMR and webpack-dev-server results in
TypeError: Invalid value used as weak map keyfor each css module file.Expected Behavior
App compiles cleanly with no errors and serves with HMR.
Actual Behavior
An error is throw for each css modules file:
TypeError: Invalid value used as weak map keyand compilation fails.
Environment
⬡ webpack info ──────────────────────────────────────────────────────────────────────── System and environment information. ⬡ System: ──────────────────────────────────────────────────────────────────────── OS: macOS 26.5.1 CPU: (18) arm64 Apple M5 Max Memory: 2.73 GB / 48.00 GB ⬡ Binaries: ──────────────────────────────────────────────────────────────────────── Node: 24.18.0 - /usr/local/bin/node Yarn: 4.17.0 - /usr/local/bin/yarn npm: 11.16.0 - /usr/local/bin/npm ⬡ Browsers: ──────────────────────────────────────────────────────────────────────── Chrome: 149.0.7827.54 Safari: 26.5 ⬡ Packages: ──────────────────────────────────────────────────────────────────────── babel-loader: ^10.1.1 → 10.1.1 babel-loader-exclude-node-modules-except: ^1.2.4 → 1.2.4 css-loader: ^7.1.4 → 7.1.4 css-minimizer-webpack-plugin: ^8.0.0 → 8.0.0 dotenv-webpack: ^9.0.0 → 9.0.0 html-webpack-plugin: ^5.6.7 → 5.6.7 node-polyfill-webpack-plugin: ^4.1.0 → 4.1.0 postcss-loader: ^8.2.1 → 8.2.1 react-compiler-webpack: ^1.0.1 → 1.0.1 resource-hints-webpack-plugin: ^0.0.2 → 0.0.2 source-map-loader: ^5.0.0 → 5.0.0 style-loader: ^4.0.0 → 4.0.0 terser-webpack-plugin: ^5.6.1 → 5.6.1 thread-loader: ^4.0.4 → 4.0.4 webpack: ^5.107.2 → 5.108.2 webpack-cli: ^7.0.3 → 7.1.0 webpack-dev-server: ^5.2.4 → 5.2.5 webpack-merge: ^6.0.1 → 6.0.1 webpack-node-externals: ^3.0.0 → 3.0.0 workbox-webpack-plugin: ^7.4.1 → 7.4.1 ──────────────────────────────────────────────────────────────────────── ℹ Run 'webpack --help=verbose' to see all available commands and options. Webpack documentation: https://webpack.js.org/ CLI documentation: https://webpack.js.org/api/cli/ Made with ♥ by the webpack teamIs this a regression?
Yes (please specify version below)
Last Working Version
v5.107.2
Additional Context
No response