D
D
Dmitry2021-03-30 23:32:26
css
Dmitry, 2021-03-30 23:32:26

Error running webpack serve, can't figure out what's the problem?

Good day to all. Please do not swear.
Assembly from an online course. in the course chat they didn’t help me with this,
I assume that the assembly is for webpack 4, and I updated all the dependencies and, accordingly, webpack to version 5. help me please.

Here is the error output:

(base) [email protected]:/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.


Here is 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',
};

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question