Ошибка в webpack при запуске npm запустите dev и не знаете, почему или как ее устранить

#javascript #css #node.js #angular #webpack

Вопрос:

Я продолжаю получать сообщение об ошибке, когда пытаюсь запустить npm dev в командной строке. Я удалил пакет, который, как я думал, не использовался, и принудительно исправил его с помощью npm-fix-force. Я также попытался снова удалить папку node-modules и пакеты установки npm, но это не решило проблему…

Теперь я не знаю, как решить эту проблему, так как я не знаю, что это значит и почему это происходит.

вот вывод ошибок с терминала:

 PS C:wamp64wwwworkshop_01wp-contentthemesworkshop_01> npm run dev

> workshop_01@1.0.0 dev C:wamp64wwwworkshop_01wp-contentthemesworkshop_01
> npm-run-all -p devFast buildWatch


> workshop_01@1.0.0 devFast C:wamp64wwwworkshop_01wp-contentthemesworkshop_01
> webpack-dev-server


> workshop_01@1.0.0 buildWatch C:wamp64wwwworkshop_01wp-contentthemesworkshop_01
> webpack --watch


webpack is watching the files…

(node:11464) [DEP_WEBPACK_WATCH_WITHOUT_CALLBACK] DeprecationWarning: A 'callback' argument need to be provided to the 'webpack(options, callback)' function when the 'watch' option is set. There is no way to handle the 'watch' option without a callback.
(Use `node --trace-deprecation ...` to show where the warning was created)
i 「wds」: Project is running at http://localhost:3000/
i 「wds」: webpack output is served from http://localhost:3000/
i 「wds」: Content not from webpack is served from C:wamp64wwwworkshop_01wp-contentthemesworkshop_01
assets by status 1.79 KiB [cached] 1 asset
runtime modules 663 bytes 3 modules       
cacheable modules 186 bytes
  ./js/scripts.js 147 bytes [built] [code generated]
  ./js/css/style.css 39 bytes [built] [code generated] [1 error]

ERROR in ./js/css/style.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'plugins'. These properties are valid:
   object { postcssOptions?, execute?, sourceMap?, implementation? }
    at validate (C:wamp64wwwworkshop_01wp-contentthemesworkshop_01node_moduleswebpacknode_modulesschema-utilsdistvalidate.js:104:11)
    at Object.getOptions (C:wamp64wwwworkshop_01wp-contentthemesworkshop_01node_moduleswebpacklibNormalModule.js:529:19)
    at Object.loader (C:wamp64wwwworkshop_01wp-contentthemesworkshop_01node_modulespostcss-loaderdistindex.js:42:24)
    at processResult (C:wamp64wwwworkshop_01wp-contentthemesworkshop_01node_moduleswebpacklibNormalModule.js:703:19)
    at C:wamp64wwwworkshop_01wp-contentthemesworkshop_01node_moduleswebpacklibNormalModule.js:809:5
    at C:wamp64wwwworkshop_01wp-contentthemesworkshop_01node_modulesloader-runnerlibLoaderRunner.js:399:11
    at C:wamp64wwwworkshop_01wp-contentthemesworkshop_01node_modulesloader-runnerlibLoaderRunner.js:251:18
 @ ./js/scripts.js 1:0-25

1 ERROR in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)
webpack 5.38.1 compiled with 2 errors in 1480 ms
× 「wdm」: asset bundled.js 403 KiB [emitted] (name: scripts) 1 related asset
runtime modules 25.9 KiB 13 modules
modules by path ./node_modules/ 345 KiB
  modules by path ./node_modules/webpack-dev-server/ 21.2 KiB
    modules by path ./node_modules/webpack-dev-server/client/ 20.9 KiB 10 modules
    modules by path ./node_modules/webpack-dev-server/node_modules/ 296 bytes 2 modules
  modules by path ./node_modules/webpack/hot/ 4.46 KiB 5 modules
  modules by path ./node_modules/html-entities/lib/*.js 61 KiB 5 modules
  modules by path ./node_modules/url/ 37.4 KiB 3 modules
  modules by path ./node_modules/querystring/*.js 4.51 KiB 3 modules
modules by path ./js/ 2.21 KiB
  ./js/scripts.js 147 bytes [built] [code generated]
  ./js/css/style.css 2.03 KiB [built] [code generated]
  ./node_modules/css-loader/dist/cjs.js?url=false!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./js/css/style.css 39 bytes [built] [code generated] [1 error]     

ERROR in ./js/css/style.css (./node_modules/css-loader/dist/cjs.js?url=false!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./js/css/style.css)
Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'plugins'. These properties are valid:
   object { postcssOptions?, execute?, sourceMap?, implementation? }
    at validate (C:wamp64wwwworkshop_01wp-contentthemesworkshop_01node_moduleswebpacknode_modulesschema-utilsdistvalidate.js:104:11)
    at Object.getOptions (C:wamp64wwwworkshop_01wp-contentthemesworkshop_01node_moduleswebpacklibNormalModule.js:529:19)
    at Object.loader (C:wamp64wwwworkshop_01wp-contentthemesworkshop_01node_modulespostcss-loaderdistindex.js:42:24)
 @ ./js/css/style.css 2:26-176 53:4-74:5 56:18-168
 @ ./js/scripts.js 1:0-25

webpack 5.38.1 compiled with 1 error in 5059 ms
i 「wdm」: Failed to compile.
 

Как я могу исправить это, чтобы webpack мог продолжать следить за моим проектом на предмет изменений, которые я вношу?

Пожалуйста, помогите :/

Комментарии:

1. Похоже, у вас ошибка конфигурации в PostCSS

2. Как вы можете видеть, я изменил свой ответ.

3. ПостКСС, хорошо. Должен ли я удалить и переустановить его снова?

4. Из вашего журнала ошибок: Ошибка проверки: Недопустимый объект параметров. Загрузчик PostCSS был инициализирован с использованием объекта options, который не соответствует схеме API.

5. Я бы посмотрел на схему API и убедился, что вы правильно передаете объект конфигурации.