Ошибка при запуске webpack serve, не могу понять в чем проблема?

Question

[Дмитрий]

Всем доброго времени суток. Прошу не ругаться.
Сборка из онлайн курса. в чате курса мне никак не помогли с этим
предполагаю что сборка для webpack 4, а я обновил все зависимости и соответственно webpack до 5 версии. помогите пожалуйста.

Вот вывод ошибки:

(base) dmitiy@dmitriy-hp:/hdd/dmitiy/Рабочий стол/projects/Avia-tickets$ webpack serve
ℹ ｢wds｣: Project is running at http://localhost:9000/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from /hdd/dmitiy/Рабочий стол/projects/Avia-tickets/dist
ℹ ｢wds｣: 404s will fallback to /index.html
(node:126205) [DEP_WEBPACK_TEMPLATE_PATH_PLUGIN_REPLACE_PATH_VARIABLES_HASH] DeprecationWarning: [hash] is now [fullhash] (also consider using [chunkhash] or [contenthash], see documentation for details)
(Use `node --trace-deprecation ...` to show where the warning was created)
✖ ｢wdm｣: 3 assets
424 modules

ERROR in ./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 (/hdd/dmitiy/Рабочий стол/projects/Avia-tickets/node_modules/webpack/node_modules/schema-utils/dist/validate.js:104:11)
    at Object.getOptions (/hdd/dmitiy/Рабочий стол/projects/Avia-tickets/node_modules/webpack/lib/NormalModule.js:501:6)
    at Object.loader (/hdd/dmitiy/Рабочий стол/projects/Avia-tickets/node_modules/postcss-loader/dist/index.js:38:24)
    at processResult (/hdd/dmitiy/Рабочий стол/projects/Avia-tickets/node_modules/webpack/lib/NormalModule.js:675:19)
    at /hdd/dmitiy/Рабочий стол/projects/Avia-tickets/node_modules/webpack/lib/NormalModule.js:774:5
    at /hdd/dmitiy/Рабочий стол/projects/Avia-tickets/node_modules/loader-runner/lib/LoaderRunner.js:399:11
    at /hdd/dmitiy/Рабочий стол/projects/Avia-tickets/node_modules/loader-runner/lib/LoaderRunner.js:251:18

1 ERROR in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)
webpack 5.28.0 compiled with 2 errors in 4692 ms
ℹ ｢wdm｣: Failed to compile.

Вот webpack.config.js

const path = require('path');
const autoprefixer = require('autoprefixer');
const precss = require('precss');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {

  entry: {
    polyfill: 'babel-polyfill',
    app: './js/app.js',
  },

  context: path.resolve(__dirname, 'src'),
  devServer: {
    publicPath: '/',
    port: 9000,
    contentBase: path.join(process.cwd(), 'dist'),
    host: 'localhost',
    historyApiFallback: true,
    noInfo: false,
    stats: 'minimal',
    hot: true,
  },
  module: {

    rules: [
      {
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
        test: /\.js$/,
      },
      {
        test: /\.css$/,
        use: [
          {
// webstorm ругается на этот loader  Unresolved variable loader
            loader: MiniCssExtractPlugin.loader,
          },
          {
            loader: 'css-loader',

            options: {
              importLoaders: 1,
              sourceMap: true,
            },
          },
          {
            loader: 'postcss-loader',
            options: {
              plugins: () => [precss, autoprefixer],
            },
          },
        ],
      },
      {
        test: /\.(png|jpe?g|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[path][name].[ext]',
            },
          },
        ],
      },
    ],
  },

  plugins: [
// и тут ругается на MiniCssExtractPlugin - Method expression is not of Function type
    new MiniCssExtractPlugin({
      filename: './style.css',
    }),
    new HtmlWebpackPlugin({
      template: 'index.html',
    }),
  ],

  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[hash].js',
  },
  mode: 'development',
};

Comments

[Михаил]

в ошибке все написано

[Дмитрий]

Михаил, это я вижу. но мне это ничего не дает. я не знаю как это чинить

[GlazOtca]

Возможно не все библиотеки умеют правильно обрабатывать путь с русскими буквами и пробелом: "/hdd/dmitiy/Рабочий стол/projects/Avia-tickets"

[Дмитрий]

GlazOtca, попробовал с Desktop, ничего не вышло. тоже самое

[Вадим]

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? }

Написано же что Pluginsне поддерживаемое свойство и ниже перечислены свойства, которые поддерживаются.

[Дмитрий]

Вадим, да я это вижу. но я не понимаю что там нужно исправить что б все работало. добился в итоге успешной компиляции но ошибка в postcss

[Вадим]

Дмитрий,

я не понимаю что там нужно исправить

Как вариант, посетить документацию по post css loader и посмотреть как конфигурировать его правильно.

{
    loader: "postcss-loader",
    options: {
        postcssOptions: {
            plugins: [
                [
                    "postcss-preset-env",
                    {
                        // Options
                    },
                ],
            ],
        },
    },
}