question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:9 (5 by maintainers)

github_iconTop GitHub Comments

4reactions
vankopcommented, Feb 2, 2022

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

{ experimentalUseImportModule: false }

to MiniCssExtractPlugin.

0reactions
vankopcommented, Feb 25, 2022

all is done from webpack side, need wait for fix in mini-css https://github.com/webpack-contrib/mini-css-extract-plugin/pull/915

Read more comments on GitHub >

github_iconTop Results From Across the Web

Webpack: TypeError: Cannot read property ... - Stack Overflow
js:89 describe: optionsSchema.definitions.output.properties.path.description,. Not sure why I'm getting this error, but I upgraded from Webpack ...
Read more >
[webpack-cli] typeerror: cannot read properties of undefined ...
I am new to Vue js and faced with the following problem: When trying to launch a project, an error occurs: Cannot read...
Read more >
Cannot read properties of undefined (reading ... - Reddit
I am using supabase in a vue app, but stuck with an error Cannot read properties of undefined (reading 'VUE_APP_SUPABASE_URL'). in the .env ......
Read more >
Cannot read properties of undefined' - JavaScript Debugging
Join Discord https://selftaught-dev.com/join-discord//r/SelfTaughtDev - https://www.reddit.com/r/selftaughtdevGet My Resume Template Free ...
Read more >
Webpack Error: Cannot read property .toWebpackConfig of ...
Webpack Error: Cannot read property .toWebpackConfig of undefined · ERROR in Conflict: Multiple assets emit different content to the same filename js/.br ·...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found