Ошибка при запуске сервера на webpack?

Question

Алексей Яковлев @aleshaykovlev

html, css, js, node, webpack, sass, react

Webpack

Ошибка при запуске сервера на webpack?

Error:

Html Webpack Plugin:

  Error: Child compilation failed:
  Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
  TypeError: this.getOptions is not a function
  
  
  - TypeError: this.getOptions is not a function
  
  - ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
  
  - TypeError: this.getOptions is not a function
  
  - index.js:38 Object.loader
    [portfolio]/[postcss-loader]/dist/index.js:38:24
  
  - NormalModule.js:316 
    [portfolio]/[webpack]/lib/NormalModule.js:316:20
  
  - LoaderRunner.js:367 
    [portfolio]/[loader-runner]/lib/LoaderRunner.js:367:11
  
  - LoaderRunner.js:233 
    [portfolio]/[loader-runner]/lib/LoaderRunner.js:233:18
  
  - child-compiler.js:131 
    [portfolio]/[html-webpack-plugin]/lib/child-compiler.js:131:18
  
  - Compiler.js:343 
    [portfolio]/[webpack]/lib/Compiler.js:343:11
  
  - Compiler.js:681 
    [portfolio]/[webpack]/lib/Compiler.js:681:15
  
  
  - Hook.js:154 AsyncSeriesHook.lazyCompileHook
    [portfolio]/[tapable]/lib/Hook.js:154:20
  
  - Compiler.js:678 
    [portfolio]/[webpack]/lib/Compiler.js:678:31
  
  
  - Hook.js:154 AsyncSeriesHook.lazyCompileHook
    [portfolio]/[tapable]/lib/Hook.js:154:20
  
  - Compilation.js:1423 
    [portfolio]/[webpack]/lib/Compilation.js:1423:35

package.json:

{
  "name": "portfolio",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "browserslist": [
    "Edge 16"
  ],
  "postcss": {
    "plugins": {
      "postcss-preset-env": {},
      "autoprefixer": {}
    }
  },
  "babel": {
    "presets": [
      [
        "@babel/preset-env"
      ]
    ]
  },
  "scripts": {
    "build:css": "postcss ./src/styles/style.sass -o ./docs/styles/style.css",
    "build:js": "babel ./src/scripts/script.js -o ./docs/scripts/script.js",
    "build": "webpack npm run build:css && npm run build:js",
    "start": "webpack-dev-server --open"
  },
  "repository": {
    "type": "git",
    "url": ""
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": ""
  },
  "dependencies": {
    "@babel/preset-env": "^7.13.12",
    "aos": "^2.3.4",
    "css-loader": "^5.0.1",
    "file-loader": "^6.2.0",
    "filtab": "^0.1.4",
    "jquery": "^3.6.0",
    "node-sass": "^5.0.0",
    "postcss-loader": "^5.2.0",
    "postcss-normalize": "^9.0.0",
    "postcss-preset-env": "^6.7.0",
    "sass": "^1.30.0",
    "sass-loader": "^10.1.0",
    "style-loader": "^2.0.0",
    "typescript": "^4.1.3",
    "typescript-cli": "^0.1.0",
    "webpack": "^4.44.2",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.1"
  },
  "devDependencies": {
    "@babel/core": "^7.12.10",
    "autoprefixer": "^10.2.5",
    "babel-loader": "^8.2.2",
    "clean-webpack-plugin": "^3.0.0",
    "html-webpack-plugin": "^4.5.0",
    "mini-css-extract-plugin": "^1.3.3"
  }
}

webpack.js:

const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const autoprefixer = require('autoprefixer');

module.exports = {
    mode: 'development',
    entry: './src/scripts/script.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'docs')
    },
    devServer: {
        port: 3000
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HTMLWebpackPlugin({
            filename: 'index.html',
            template: './src/index.html'
        }),
        new MiniCssExtractPlugin({
            filename: '[name].css'
        })
    ],
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                loader: 'postcss-loader',
                options: {
                    plugins: [
                        autoprefixer({
                            browsers:['ie >= 8', 'last 4 version']
                        })
                    ],
                    sourceMap: true
                }
            },
            {
                test: /\.js$/,
                use: 'babel-loader',
                exclude: [
                  /node_modules/
                ]
            },
            {
                test: /\.sass$/,
                use: [{
                    loader: MiniCssExtractPlugin.loader
                },
                'css-loader',
                'sass-loader'
                ]
            },
            {
                test: /\.(png|jpg|gif|ico|svg)$/,
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]',
                    context: ''
                }
            },
            {
                test: /\.(ttf|woff|woff2|otf)$/,
                use: ['file-loader']
            }
        ]
    }
}