javascript - the error gives the npm name of a package that does not exist

Question

An error appeared - Cannot find the module, but the problem is that such a module does not exist. The correct module name is babel-plugin-proposal-class-properties (and the error - 'babel-plugin-transform-class-propties'). Please tell me what could be the problem.

I type "npm run start:dev" into the terminal and I get the error output.
webpack.config.js:

const path = require('path')

const { CleanWebpackPlugin } = require('clean-webpack-plugin')
var HtmlWebpackPlugin = require('html-webpack-plugin')
const CopyPlugin = require('copy-webpack-plugin')

const TerserJSPlugin = require('terser-webpack-plugin') // min js
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin') // min css

const autoprefixer = require('autoprefixer-stylus')

const devMode = process.env.NODE_ENV !== 'production'
// dev - devMode = true
// prod - devMode = false

const jsLoaders = () => {
  const loaders = [
    {
      loader: 'babel-loader',
      options: {
        presets: ['@babel/preset-env'],
      },
    },
  ]

  if (devMode) {
    loaders.push('eslint-loader')
  }

  return loaders
}

module.exports = {
  context: path.resolve(__dirname, 'frontend/src'),
  // entry: ['@babel/polyfill', './index.js'],
  entry: './index.js',
  mode: 'development', // uncompress
  output: {
    // filename: 'bundle.[hash].js', // 'build.js',
    // path: path.resolve(__dirname, 'dist'),
    path: path.resolve(__dirname, 'frontend/static/frontend'),
    filename: 'main.js'
  },
  optimization: {
    minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
  },
  resolve: {
    // элиасы
    extensions: ['.js'],
    alias: {
      '@': path.resolve(__dirname, 'frontend/src'),
      fonts: path.join(__dirname, 'frontend/src/assets/fonts'),
    },
  },
  devtool: devMode ? 'source-map' : false,
  devServer: {
    port: 5000,
    hot: devMode,
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, 'frontend/templates/frontend/index.html'),
    }),
    new CopyPlugin({
      patterns: [
        {
          // imgs
          from: path.resolve(__dirname, 'frontend/src/assets/img'),
          to: 'assets/img',
        },
        {
          // fonts
          from: path.resolve(__dirname, 'frontend/src/assets/fonts'),
          to: 'assets/fonts',
        },
      ],
    }),
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: devMode ? 'style.css' : 'style.[hash].css',
      chunkFilename: devMode ? '[id].css' : '[id].[hash].css',
    }),
  ],
  module: {
    rules: [
      {
        test: /.js$/,
        exclude: /node_modules/,
        use: jsLoaders(),
      },
      {
        test: /.(sa|sc|c)ss$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              hmr: process.env.NODE_ENV === 'development',
              reloadAll: true,
            },
          },
          'css-loader?url=false',
          'sass-loader',
        ],
      },
      {
        test: /.styl$/,
        use: [
          {
            loader: 'style-loader', // creates style nodes from JS strings
          },
          {
            loader: MiniCssExtractPlugin.loader,
            options: { publicPath: 'frontend/dist' },
          },
          { loader: 'css-loader' },
          // {loader: 'stylus-loader'},
          {
            loader: 'stylus-loader', // compiles Stylus to CSS
            options: {
              use: [autoprefixer()],
            },
          },
        ],
      },
      {
        test: /.pug$/,
        loader: 'pug-loader',
        options: {
          pretty: true,
        },
      },
      {
        test: /.(png|svg|jpg|gif|eot|ttf|woff|woff2)$/,
        loader: 'url-loader',
        options: {
          publicPath: './',
          limit: 10000,
        },
      },
    ],
  },
}

package.json

{
  "name": "app",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "start": "cross-env NODE_ENV=development webpack-dev-server --open",
    "start:dev": "cross-env NODE_ENV=development webpack serve",
    "build": "cross-env NODE_ENV=production webpack --mode=production",
    "test": "jest"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.12.10",
    "@babel/preset-env": "^7.12.11",
    "@babel/preset-react": "^7.12.10",
    "autoprefixer-stylus": "^1.0.0",
    "babel-eslint": "^10.1.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "clean-webpack-plugin": "^3.0.0",
    "copy-webpack-plugin": "^7.0.0",
    "cross-env": "^7.0.3",
    "css-loader": "^5.0.1",
    "eslint": "^7.18.0",
    "eslint-config-google": "^0.14.0",
    "eslint-loader": "^4.0.2",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.0.0-beta.6",
    "jest": "^26.6.3",
    "mini-css-extract-plugin": "^1.3.4",
    "node-sass": "4.14.1",
    "optimize-css-assets-webpack-plugin": "^5.0.4",
    "postcss-loader": "^4.1.0",
    "pug": "^3.0.0",
    "pug-loader": "^2.4.0",
    "sass-loader": "^10.1.1",
    "style-loader": "^2.0.0",
    "stylus": "^0.54.8",
    "stylus-loader": "^4.3.3",
    "terser-webpack-plugin": "^5.1.1",
    "url-loader": "^4.1.1",
    "webpack": "^5.17.0",
    "webpack-cli": "^4.4.0",
    "webpack-dev-server": "^3.11.2"
  },
  "dependencies": {
    "@babel/polyfill": "^7.12.1",
    "@leanup/cli": "^1.0.90",
    "@leanup/cli-preact": "^1.0.90",
    "babel-loader": "8.2.1",
    "browserslist": "^4.16.1",
    "prop-types": "^15.7.2",
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  }
}

index.js - https://codepen.io/dev-sera/pen/mdObpwv

question from:https://stackoverflow.com/questions/65927842/the-error-gives-the-npm-name-of-a-package-that-does-not-exist

Answer 1

The error shows that you've misspelled "properties" as "propties", missing the "er" after the second "p" somewhere in index.js