Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead

Question

I see the following errors when trying to start my app...

> css-modules@1.0.0 start /Users/johnnynolan/Repos/css-modules

webp

Answer 1

I had fixed the bug by using the version 4.0.0-beta.0 of extract-text-webpack-plugin.

Answer 2

Yea, I got the same issue with webpack 4.10.2. The problem is fixed after I swap the extract-css-chunks-webpack-plugin to mini-css-extract-plugin.

Here's the webpack config changes:

-const ExtractCssChunks = require('extract-css-chunks-webpack-plugin')
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  name: 'client',
  target: 'web',
  module: {
    rules: [
      {
        test: /\.css$/,
-       use: ExtractCssChunks.extract({
-         use: 'css-loader'
-       })
+       use: [
+         {
+           loader: MiniCssExtractPlugin.loader,
+         },
+         "css-loader"
+       ]
      }
    ]
  },
// 
// other config........
//
   plugins: [
-    new ExtractCssChunks(),
+    new MiniCssExtractPlugin({
+        filename: `components/[name].css`
+    }),
     //
     // other config........
     //
   ]

Hope it can help.

Answer 3

Most of the comments here https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/701 point to extract-text-plugin change it to mini-css-extract-plugin instead.

From the Github repo of extract-text-webpack-plugin https://github.com/webpack-contrib/extract-text-webpack-plugin

⚠️ Since webpack v4 the extract-text-webpack-plugin should not be used for css. Use mini-css-extract-plugin instead.

Head over to mini-css-extract-plugin on how to swap/upgrade it https://github.com/webpack-contrib/mini-css-extract-plugin

Answer 4

npm install extract-text-webpack-plugin@next

This did the trick for me!