Error [ERR_MODULE_NOT_FOUND]: Cannot find package '@babel/plugin-preset-react' imported fr-CodePudding

when I run the command to build the react project:

yarn build

show error:

➜  react-admin git:(master) ✗ yarn build
yarn run v1.22.17
$ webpack --mode production --config config/webpack.build.config.js
assets by status 1.48 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 [ERR_MODULE_NOT_FOUND]: Cannot find package '@babel/plugin-preset-react' imported from /Users/xiaoqiangjiang/source/reddwarf/frontend/react-admin/babel-virtual-resolve-base.js
    at new NodeError (/Users/xiaoqiangjiang/source/reddwarf/frontend/react-admin/node_modules/@babel/core/lib/vendor/import-meta-resolve.js:2552:5)
    at packageResolve (/Users/xiaoqiangjiang/source/reddwarf/frontend/react-admin/node_modules/@babel/core/lib/vendor/import-meta-resolve.js:3208:9)
    at moduleResolve (/Users/xiaoqiangjiang/source/reddwarf/frontend/react-admin/node_modules/@babel/core/lib/vendor/import-meta-resolve.js:3242:18)
    at defaultResolve (/Users/xiaoqiangjiang/source/reddwarf/frontend/react-admin/node_modules/@babel/core/lib/vendor/import-meta-resolve.js:3281:13)
    at /Users/xiaoqiangjiang/source/reddwarf/frontend/react-admin/node_modules/@babel/core/lib/vendor/import-meta-resolve.js:3304:14
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (/Users/xiaoqiangjiang/source/reddwarf/frontend/react-admin/node_modules/@babel/core/lib/vendor/import-meta-resolve.js:63:103)
    at _next (/Users/xiaoqiangjiang/source/reddwarf/frontend/react-admin/node_modules/@babel/core/lib/vendor/import-meta-resolve.js:65:194)
    at /Users/xiaoqiangjiang/source/reddwarf/frontend/react-admin/node_modules/@babel/core/lib/vendor/import-meta-resolve.js:65:364
    at new Promise (<anonymous>)

I have tried to delete the node_modules folder and reinstall but did not work. this is the package.json about babel:

    "@babel/core": "^7.17.5",
    "@babel/preset-react": "^7.16.7",
    "@fingerprintjs/fingerprintjs": "^3.3.2",
    "@svgr/webpack": "4.3.3",
    "@typescript-eslint/eslint-plugin": "^2.10.0",
    "@typescript-eslint/parser": "^2.10.0",
    "animate.css": "^3.7.2",
    "antd": "^4.17.4",
    "axios": "^0.19.0",
    "babel-eslint": "10.1.0",
    "babel-jest": "^24.9.0",
    "babel-loader": "^8.2.3",
    "babel-plugin-named-asset-import": "^0.3.6",
    "babel-preset-react-app": "^9.1.2",

why did this error happen? what should I do to fix this problem? I have already tried this command:

yarn add babel-preset-react

CodePudding user response：

It could be missing a config file for babel. Could you try to add babel config file and add this code inside it( Refer to babel config link https://babeljs.io/docs/en/config-files)

{
  "presets": ["@babel/preset-react"]
}