Node v9 + Webpack v4 + extract-text-webpack-plugin = Compilation Error

Question

//webpack.config.js -- shortened for convenience const ExtractTextPlugin = require("extract-text-webpack-plugin"), extractSass = new ExtractTextPlugin({ filename: "Css/[name].css", allChunks: true }), //… config: { module: { rules: [ //… { test: /\.scss$/, use: extractSass.extract([ 'css-loader', 'sass-loader' ]) } //… ] }, plugins: [ extractSass ] } module.exports = config; 

Using:

  0% compiling(node:333) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead (node:333) DeprecationWarning: Tapable.apply is deprecated. Call apply on the plugin directly instead 77% module and chunk tree optimization unnamed compat plugin/xxx/node_modules/webpack/lib/Chunk.js:460 throw new Error( ^ Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead at Chunk.get (/xxx/node_modules/webpack/lib/Chunk.js:460:9) at /xxx/node_modules/extract-text-webpack-plugin/dist/index.js:176:48 at Array.forEach (<anonymous>) at /xxx/node_modules/extract-text-webpack-plugin/dist/index.js:171:18 at AsyncSeriesHook.eval [as callAsync] (eval at create (/xxx/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:12:1) at AsyncSeriesHook.lazyCompileHook [as _callAsync] (/xxx/node_modules/tapable/lib/Hook.js:35:21) at Compilation.seal (/xxx/node_modules/webpack/lib/Compilation.js:881:27) at hooks.make.callAsync.err (/xxx/node_modules/webpack/lib/Compiler.js:464:17) at _err0 (eval at create (/xxx/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:11:1) at _addModuleChain (/xxx/node_modules/webpack/lib/Compilation.js:749:12) at processModuleDependencies.err (/xxx/node_modules/webpack/lib/Compilation.js:688:9) at process._tickCallback (internal/process/next_tick.js:150:11) 

This setup worked before webpack v4. Disabling the plugin leads to the disappearance of the error. I found that the webpacks plugin system has changed, but I could not figure out how to fix this error.

Answer 1

As described here , the problem is that to work with webpack v4 you need to update extract-text-webpack-plugin . So:

 npm install extract-text-webpack-plugin@next 

definitely solve the problem.

Answer 2

It appears that extract-text-webpack-plugin is deprecated for Webpack v4. See README , which says:

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

This issue of The Future of this plugin and Mini CSS Extract Plugin provides more information about this.

Answer 3

Use this version of "extract-text-webpack-plugin": "^ 4.0.0-beta.0",