2

When creating a fresh web project using ASP.NET Core and Webpack, I'm getting dependency warnings from yarn about extract-text-webpack-plugin.

My steps to reproduce:

  1. dotnew new web
  2. yarn init
  3. yarn add --dev webpack webpack-cli
  4. webpack init

The following warning message is displayed:

warning " > extract-text-webpack-plugin@3.0.2" has incorrect peer dependency "webpack@^3.1.0".

  1. webpack

Displays the following error message:

(node:19320) DeprecationWarning: Tapable.plugin is deprecated. Use new API on '.hooks' instead D:\SRC\MISC\WebpackTest\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 (D:\SRC\MISC\WebpackTest\node_modules\webpack\lib\Chunk.js:460:9) at D:\SRC\MISC\WebpackTest\node_modules\extract-text-webpack-plugin\dist\index.js:176:48 at Array.forEach () at D:\SRC\MISC\WebpackTest\node_modules\extract-text-webpack-plugin\dist\index.js:171:18 at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\SRC\MISC\WebpackTest\node_modules\tapable\lib\HookCodeFactory.js:24:12), :7:1) at AsyncSeriesHook.lazyCompileHook [as _callAsync] (D:\SRC\MISC\WebpackTest\node_modules\tapable\lib\Hook.js:35:21) at Compilation.seal (D:\SRC\MISC\WebpackTest\node_modules\webpack\lib\Compilation.js:881:27) at hooks.make.callAsync.err (D:\SRC\MISC\WebpackTest\node_modules\webpack\lib\Compiler.js:464:17) at _err0 (eval at create (D:\SRC\MISC\WebpackTest\node_modules\tapable\lib\HookCodeFactory.js:24:12), :11:1) at _addModuleChain (D:\SRC\MISC\WebpackTest\node_modules\webpack\lib\Compilation.js:749:12) at processModuleDependencies.err (D:\SRC\MISC\WebpackTest\node_modules\webpack\lib\Compilation.js:688:9) at process._tickCallback (internal/process/next_tick.js:150:11)

The current versions of webpack yarn is pulling down are:

"devDependencies": {
  "webpack": "^4.1.1",
  "webpack-cli": "^2.0.10"
},

I'm aware that extract-text-webpack-plugin does not yet support Webpack 4 so I'm curious why the webpack init tries to include it. Are there any alternatives to extract-text-webpack-plugin or is the only workaround to roll back to Webpack 3?

tk421
  • 5,775
  • 6
  • 23
  • 34
Chris Pickford
  • 8,642
  • 5
  • 42
  • 73

4 Answers4

6

After raising an issue with webpack-cli this bad reference has been addressed in this pull request.

The fix has updated the package dependency to extract-text-webpack-plugin@next and having tested this locally I can confirm that this no longer throws an error on build.

yarn remove extract-text-webpack-plugin
yarn add --dev extract-text-webpack-plugin@next
Chris Pickford
  • 8,642
  • 5
  • 42
  • 73
3

I have faced same problem using npm, it is solved similarly to the yarn solution:

npm uninstall extract-text-webpack-plugin
npm i -D extract-text-webpack-plugin@next

Ref

Altough authors state:

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

Ref

another
  • 3,440
  • 4
  • 27
  • 34
1

You can use mini-css-extract-plugin, which is I believe supposed to replace extract-text-webpack-plugin for webpack 4. https://www.npmjs.com/package/mini-css-extract-plugin

But beware of some issues like broken incremental css rebuilds in watch mode, as it is only a beta release for now.

istredd
  • 11
  • 3
  • While this plugin may suffice for simpler builds, it does not have feature parity with extract-text-webpack-plugin unfortunately. – Chris Pickford Mar 09 '18 at 09:17
0

If you have a question of installing extract-text-webpack-plugin when your environment is in webpack 4,you just need do as follows:

npm i extract-text-webpack-plugin@next -D

but i also have a question: the version 4 of extract-text-webpack-plugin is completed three years ago, why i execute extract-text-webpack-plugin@4.0.0 which is error?

xiaolizi
  • 1