Chunk.entrypoints: utilisez Chunks.groupsIterable et filtrez par instance de Entrypoint à la place

91

Je vois les erreurs suivantes lorsque j'essaye de démarrer mon application ...

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

webpack && ouvrir index.html

(node:5706) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
/Users/johnnynolan/Repos/css-modules/node_modules/webpack/lib/Chunk.js:802
        throw new Error(
        ^

Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead
    at Chunk.get (/Users/johnnynolan/Repos/css-modules/node_modules/webpack/lib/Chunk.js:802:9)
    at /Users/johnnynolan/Repos/css-modules/node_modules/extract-text-webpack-plugin/dist/index.js:176:48
    at Array.forEach (<anonymous>)
    at /Users/johnnynolan/Repos/css-modules/node_modules/extract-text-webpack-plugin/dist/index.js:171:18
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/johnnynolan/Repos/css-modules/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:7:1)
    at AsyncSeriesHook.lazyCompileHook [as _callAsync] (/Users/johnnynolan/Repos/css-modules/node_modules/tapable/lib/Hook.js:35:21)
    at Compilation.seal (/Users/johnnynolan/Repos/css-modules/node_modules/webpack/lib/Compilation.js:1203:27)
    at hooks.make.callAsync.err (/Users/johnnynolan/Repos/css-modules/node_modules/webpack/lib/Compiler.js:547:17)
    at _err0 (eval at create (/Users/johnnynolan/Repos/css-modules/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:11:1)
    at _addModuleChain (/Users/johnnynolan/Repos/css-modules/node_modules/webpack/lib/Compilation.js:1054:12)
    at processModuleDependencies.err (/Users/johnnynolan/Repos/css-modules/node_modules/webpack/lib/Compilation.js:980:9)
    at _combinedTickCallback (internal/process/next_tick.js:131:7)
    at process._tickCallback (internal/process/next_tick.js:180:9)
    npm ERR! code ELIFECYCLE
    npm ERR! errno 1
    npm ERR! [email protected] start: `webpack && open index.html`
    npm ERR! Exit status 1
    npm ERR! 
    npm ERR! Failed at the [email protected] start script.
    npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
    npm ERR! A complete log of this run can be found in:
    npm ERR!     /Users/johnnynolan/.npm/_logs/2018-07-17T14_04_42_021Z-debug.log
Drostan
la source
css-modules pourrait lancer quelque chose. Publiez toute la trace de la pile et la configuration de votre pack Web
PlayMa256
Je vous suggère de modifier votre question en quelque chose de plus comme "Comment puis-je résoudre ce problème?" au lieu de "Est-ce que quelqu'un a déjà vu ça?"
Amy
3
extract-text-plugin ne fonctionne pas avec Webpack v4
IVO GELOV

Réponses:

190
npm install extract-text-webpack-plugin@next

Cela a fait l'affaire pour moi!

Steven McConnon
la source
1
Le @next m'a apporté le "^ 4.0.0-beta.0", précisément ce dont j'avais besoin. Merci.
Paula Fleck
82

La plupart des commentaires ici https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/701 pointent à le extract-text-pluginchanger à la mini-css-extract-pluginplace.

Depuis le dépôt Github de extract-text-webpack-plugin https://github.com/webpack-contrib/extract-text-webpack-plugin

⚠️ Depuis webpack v4, le plugin extract-text-webpack-plugin ne doit pas être utilisé pour les css. Utilisez plutôt mini-css-extract-plugin.

Rendez-vous mini-css-extract-pluginsur la façon de l'échanger / de le mettre à niveau https://github.com/webpack-contrib/mini-css-extract-plugin

Rikin
la source
21

Oui, j'ai eu le même problème avec Webpack 4.10.2. Le problème est résolu après que je l'échangerais extract-css-chunks-webpack-pluginà mini-css-extract-plugin.

Voici les changements de configuration du webpack:

-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........
     //
   ]

J'espère que cela peut vous aider.

Eric Tan
la source
Cela a aidé plus que les réponses ci-dessus en effet. Merci.
Paolo Stefan le
7

J'avais corrigé le bogue en utilisant la version 4.0.0-beta.0de extract-text-webpack-plugin.

TurboHZW
la source
4
La mise à jour vers 4.0.0-beta.0 a également résolu mon problème
JillAndMe
VS Code n'avait pas de saisie semi-automatique pour 4.x, alors merci de m'avoir sauvé une autre recherche Google avec une version explicite.
steven87vt
quel chemin est-ce?
Grald