"Cannot read properties of undefined (reading 'getChunkConditionMap')"

[NeilTheSeal]

Bug 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

[m1heng]

+1, recently I was trying to change babel-loader to swc-loader, but run into a similar error

ERROR in webpack/runtime/import chunk loading
Cannot read property 'getChunkConditionMap' of undefined
TypeError: Cannot read property 'getChunkConditionMap' of undefined

It happens when I have

experiments: {
    outputModule: true,
},

I haven't find these reason of this, either I am not sure if we have the same, although we have Error log looks similar.

[alexander-akait]

Please create reproducible test repo

[alexander-akait]

Also report here - #2933 (comment)

[daividh]

I've reproduce this issue with a different webpack configuration.

Minimal reproductible test repo is available above. README explain how to trigger the issue
https://github.com/daividh/webpack-issue

[vankop]

@daividh @NeilTheSeal for now as workaround I think you can pass

{ experimentalUseImportModule: false }

to MiniCssExtractPlugin.

[vankop]

@alexander-akait so this happens when mini-css imports module using importModule api.. webpack creates build time chunk and when executes module current compilation does not have chunkGraph

[daividh]

@vankop ! Thanks a LOT !
The workaround you provide is working as expected.

[ok-jose]

+1, recently I was trying to change babel-loader to swc-loader, but run into a similar error

ERROR in webpack/runtime/import chunk loading
Cannot read property 'getChunkConditionMap' of undefined
TypeError: Cannot read property 'getChunkConditionMap' of undefined

It happens when I have

experiments: {
    outputModule: true,
},

I haven't find these reason of this, either I am not sure if we have the same, although we have Error log looks similar.

I have the same error log with you, use swc-loader ,"Cannot read properties of undefined", loader target: "es5", when i set target "es017", it works.

[vankop]

all is done from webpack side, need wait for fix in mini-css webpack-contrib/mini-css-extract-plugin#915