错误：无法从“/home/dolphin/sync/source/cruise-web”找到模块“@babel/plugin-proposal-decorators”

Question

When I using this command to build the project:

yarn build

show this error:

[root@VM-0-16-centos cruise-web]# yarn build
yarn run v1.22.10
$ webpack --config config/dev.config.js
[webpack-cli] Compilation finished
assets by status 1.32 KiB [cached] 1 asset
./src/index.js 39 bytes [built] [code generated] [1 error]

ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module '@babel/plugin-proposal-decorators' from '/home/dolphin/sync/source/cruise-web'
    at Function.resolveSync [as sync] (/home/dolphin/sync/source/cruise-web/node_modules/resolve/lib/sync.js:90:15)
    at resolveStandardizedName (/home/dolphin/sync/source/cruise-web/node_modules/@babel/core/lib/config/files/plugins.js:101:31)
    at resolvePlugin (/home/dolphin/sync/source/cruise-web/node_modules/@babel/core/lib/config/files/plugins.js:54:10)
    at loadPlugin (/home/dolphin/sync/source/cruise-web/node_modules/@babel/core/lib/config/files/plugins.js:62:20)
    at createDescriptor (/home/dolphin/sync/source/cruise-web/node_modules/@babel/core/lib/config/config-descriptors.js:154:9)
    at /home/dolphin/sync/source/cruise-web/node_modules/@babel/core/lib/config/config-descriptors.js:109:50
    at Array.map (<anonymous>)
    at createDescriptors (/home/dolphin/sync/source/cruise-web/node_modules/@babel/core/lib/config/config-descriptors.js:109:29)
    at createPluginDescriptors (/home/dolphin/sync/source/cruise-web/node_modules/@babel/core/lib/config/config-descriptors.js:105:10)
    at plugins (/home/dolphin/sync/source/cruise-web/node_modules/@babel/core/lib/config/config-descriptors.js:40:19)

webpack 5.6.0 compiled with 1 error in 486 ms
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

this is my package.json :

{
  "name": "cruise-web",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "axios": "^0.18.0",
    "lib-flexible": "^0.3.2",
    "postcss": "^8.1.9",
    "postcss-loader": "^4.1.0",
    "postcss-px2rem": "^0.3.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-redux": "^7.2.2",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.0",
    "redux": "^4.0.1",
    "web-vitals": "^0.2.4"
  },
  "devDependencies": {
    "webpack": "5.6.0",
    "webpack-cli": "^4.2.0",
    "babel": "^6.23.0",
    "babel-loader": "^8.1.5",
    "@babel/core": "^7.11.4",
    "@babel/plugin-transform-react-jsx": "^7.10.4",
    "@babel/plugin-transform-react-jsx-self": "^7.10.4",
    "@babel/preset-env": "^7.11.0",
    "@babel/preset-react": "^7.10.4",
    "css-loader": "^4.2.2",
    "reactstrap": "^8.5.1",
    "style-loader": "^1.2.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "webpack --config config/dev.config.js",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "babel": {
    "plugins": [
      [
        "@babel/plugin-proposal-decorators",
        {
          "legacy": true
        }
      ]
    ],
    "presets": [
      "react-app"
    ]
  }
}

what should I do to fix this problem?

Answer 1

You don't have that plugin listed in dependencies - you are trying to use it, but you haven't installed it.

yarn add -D @babel/plugin-proposal-decorators should fix it.