"Cannot read properties of undefined (reading 'getChunkConditionMap')"
See original GitHub issueBug report
What is the current behavior?
When using hot module replacement in Webpack 5.66.0, an error is produced “Cannot read properties of undefined (reading ‘getChunkConditionMap’)”. I think it may have something to do with the file “types.d.ts”, since that is the only location I could find with a reference to “getChunkConditionMap”. My webpack.config.js is below. It is initialized with the following CLI command: “webpack serve --open --config ./_dev/webpack.config.js --mode=development
”.
MY webpack.config.js FILE
const path = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin").default;
const TerserPlugin = require("terser-webpack-plugin");
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const webpack = require("webpack");
const module_rules = [{
test: /\.(sa|sc|c)ss$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
"sass-loader",
]
},
{
test: /\.svg$/i,
use: ["to-string-loader", "html-loader"]
}
];
const html_options = {
title: "Title",
filename: "index.html",
template: path.resolve(__dirname, '../src/html/index.html'),
scriptLoading: "blocking",
hash: true,
meta: {
"viewport": "width=device-width, initial-scale=1, shrink-to-fit=no",
"keywords": "my keywords",
"author": "My Name",
"application-name": "Title",
"description": "My description."
},
}
let config = {
stats: 'errors-only',
entry: {
index: path.resolve(__dirname, '../src/index.js'),
},
devServer: {
static: {
directory: path.resolve(__dirname, '../dist'),
watch: true,
},
hot: true,
liveReload: true,
client: {
overlay: {
errors: true,
warnings: false,
},
logging: 'error',
}
},
plugins: [
new HtmlWebpackPlugin(html_options),
new MiniCssExtractPlugin({
filename: "[name].[contenthash].css",
}),
new CleanWebpackPlugin({
cleanOnceBeforeBuildPatterns: [
'**/*',
'!assets/**',
],
}),
],
output: {
filename: '[name].[contenthash].js',
path: path.resolve(__dirname, '../dist'),
clean: false,
},
module: {
rules: module_rules
},
experiments: {
futureDefaults: true,
},
};
module.exports = (env, argv) => {
if (argv.mode === "production") {
config.optimization = {
minimizer: [
new TerserPlugin({
parallel: true,
minify: TerserPlugin.uglifyJsMinify
}),
],
moduleIds: 'size',
chunkIds: 'total-size',
removeAvailableModules: true,
}
} else {
config.optimization = {
minimize: false,
moduleIds: 'named',
chunkIds: 'named',
removeAvailableModules: false,
realContentHash: false,
}
config.devtool = 'eval-source-map';
};
return config;
}
If the current behavior is a bug, please provide the steps to reproduce.
To reproduce the bug, run the code above with the following dependencies (taken from package.json):
"dependencies": {
"@popperjs/core": "^2.11.2",
"bootstrap": "^5.1.3",
"clean-webpack-plugin": "^4.0.0",
"css-loader": "^6.5.1",
"html-loader": "^3.1.0",
"html-webpack-plugin": "^5.5.0",
"mini-css-extract-plugin": "^2.5.0",
"popper.js": "^1.16.1",
"postcss-loader": "^6.2.1",
"sass": "^1.48.0",
"sass-loader": "^12.4.0",
"style-loader": "^3.3.1",
"terser-webpack-plugin": "^5.3.0",
"to-string-loader": "^1.2.0",
"uglify-js": "^3.14.5",
"webpack": "^5.66.0",
"webpack-cli": "^4.9.1",
"webpack-dev-server": "^4.7.3"
}
What is the expected behavior? The expected behavior is that the bundle loads without any errors, and Hot Module Replacement successfully loads changes to CSS files without a full page reload. Note that this error does not happen with Webpack 5.65.0, however Hot Module Replacement still appears not to function correctly with 5.65.0. With the previous version, I was using the config above as well. My temporary fix is to use full reload rather than HMR for the time being.
Other relevant information: webpack version: 5.66.0 Node.js version: 17.3.1 Operating System: Windows 10 Enterprise Additional tools: N/A
Issue Analytics
- State:
- Created 2 years ago
- Comments:9 (5 by maintainers)
Top GitHub Comments
@daividh @NeilTheSeal for now as workaround I think you can pass
to
MiniCssExtractPlugin
.all is done from webpack side, need wait for fix in mini-css https://github.com/webpack-contrib/mini-css-extract-plugin/pull/915