CODEWITHSUNDEEP
webpackasp.net-coreyarnpkgextracttextwebpackplugin
Chris Pickford
Chris Pickford

Reputation: 8991

webpack init trying to use unsupported extract-text-webpack-plugin

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 " > [email protected]" 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?

Upvotes: 2

Views: 4382

Answers (4)

xiaolizi
xiaolizi

Reputation: 1

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 [email protected] which is error?

Upvotes: 0

roizpi
roizpi

Reputation: 3648

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

Upvotes: 3

Chris Pickford
Chris Pickford

Reputation: 8991

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

Upvotes: 7

istredd
istredd

Reputation: 11

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.

Upvotes: 1

Related Questions