Chunk.entrypoints: используйте вместо этого Chunks.groupsIterable и фильтруйте по instanceof Entrypoint

При попытке запустить приложение я вижу следующие ошибки ...

> [email protected] start /Users/johnnynolan/Repos/css-modules

webpack && open 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

css-modules может что-то бросать. Опубликуйте всю трассировку стека и конфигурацию вашего веб-пакета

PlayMa256 17.07.2018 16:15

Я предлагаю вам изменить свой вопрос на что-то более похожее на «Как я могу решить эту проблему?» вместо "Кто-нибудь видел это раньше?"

user47589 17.07.2018 16:15

extract-text-plugin не работает с Webpack v4

IVO GELOV 17.07.2018 16:21
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
94
3
63 493
4

Ответы 4

Большинство комментариев здесь https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/701 укажите на extract-text-plugin, замените его на mini-css-extract-plugin.

Из репозитория Github extract-text-webpack-pluginhttps://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.

Перейти к mini-css-extract-plugin о том, как его поменять / обновить https://github.com/webpack-contrib/mini-css-extract-plugin

npm install extract-text-webpack-plugin@next

Это помогло мне!

@Next принес мне "^ 4.0.0-beta.0", именно то, что мне было нужно. Спасибо.

Paula Fleck 23.04.2020 04:16

Я исправил ошибку, используя версию 4.0.0-beta.0extract-text-webpack-plugin.

Обновление до 4.0.0-beta.0 также устранило мою проблему

JillAndMe 07.12.2018 14:55

В VS Code не было автозаполнения для 4.x, поэтому спасибо, что спас мне еще один поиск в Google с явной версией.

steven87vt 18.02.2019 23:40

какой это путь?

Grald 07.09.2019 18:57

Да, у меня такая же проблема с webpack 4.10.2. Проблема устранена после того, как я поменял extract-css-chunks-webpack-plugin на mini-css-extract-plugin.

Вот изменения в конфигурации веб-пакета:

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

Надеюсь, это поможет.

Это действительно помогло больше, чем приведенные выше ответы. Спасибо.

Paolo Stefan 16.09.2020 09:23

Другие вопросы по теме