babel-preset-react-app, is importing the "@babel/plugin-proposal-private-property-in-object" package without declaring it in its dependencies

my issue is that I've tried to create a new react project and after a lot of issues with vulnerabilities I managed to solve some of them, one of the main instructions was adding this line:

"overrides": {
    "@svgr/webpack": "$@svgr/webpack"
  },

into my package.json file.
Once I've done that I had to delete my node_modules folder and reuse npm install and now I am getting a babel error after typing npm start.

One of your dependencies, babel-preset-react-app, is importing the
"@babel/plugin-proposal-private-property-in-object" package without
declaring it in its dependencies. This is currently working because
"@babel/plugin-proposal-private-property-in-object" is already in your
node_modules folder for unrelated reasons, but it may break at any time.

babel-preset-react-app is part of the create-react-app project, which
is not maintianed anymore. It is thus unlikely that this bug will
ever be fixed. Add "@babel/plugin-proposal-private-property-in-object" to
your devDependencies to work around this error. This will make this message
go away.

I tried to search for the solution over the internet and I found only one that tells me to add this plugin to my devDependencies which did not work, and I also found a solution that tells to type CI= npm run build
which didn't work either.

This is what I'm encountering when typing npm list @babel/plugin-proposal-private-property-in-object :

npm ERR! code ELSPROBLEMS
npm ERR! invalid: @babel/plugin-proposal-private-property-in-object@7.21.0-placeholder-for-preset-env.2 C:\Users\Omri-PC\Desktop\KeeperApp\node_modules\@babel\plugin-proposal-private-property-in-object
keeper-app-part-1-starting@1.0.0 C:\Users\Omri-PC\Desktop\KeeperApp
├── @babel/plugin-proposal-private-property-in-object@7.21.0-placeholder-for-preset-env.2 invalid: "^x.x.x" from the root project
└─┬ @svgr/webpack@8.0.1 overridden
  └─┬ @babel/preset-env@7.22.5
    └── @babel/plugin-proposal-private-property-in-object@7.21.0-placeholder-for-preset-env.2 deduped invalid: "^x.x.x" from the root project

And that's how my package.json file looks like if it somehow helps to figure:

{
  "name": "keeper-app-part-1-starting",
  "version": "1.0.0",
  "description": "",
  "keywords": [],
  "main": "src/index.js",
  "dependencies": {
    "react": "18.2.0",
    "react-dom": "18.2.0"
  },
  "devDependencies": {
    "@svgr/webpack": "^8.0.1",
    "react-scripts": "5.0.1",
    "typescript": "5.1.3"
  },
  "overrides": {
    "@svgr/webpack": "$@svgr/webpack"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

Hope that I gave you enough information in order to help me solve this issue, thanks a lot!

Running the below command solved my issue

npm install --save-dev @babel/plugin-proposal-private-property-in-object

use --save-dev to install it under devDependencies

Thanks to all, eventually that's what solved my problem:
npm install --save-dev @babel/plugin-proposal-private-property-in-object --legacy-peer-deps

I also faced this issue today.
I solved by adding the required lib from here after that "npm start" and "npm run build" are fine for me.
Note: used version number ^7.21.11

Here is a combination of babel packages that worked for me:

"devDependencies": {
    "@babel/core": "7.22.5",
    "@babel/eslint-parser": "7.22.5",
    "@babel/plugin-proposal-private-property-in-object": "7.21.11",
    "@babel/preset-env": "7.22.5",
}

IMPORTANT STEP: Add @babel/plugin-proposal-private-property-in-object to .babelrc plugins as well. Something like this:

"plugins": [
    ["@babel/plugin-proposal-private-property-in-object", { "loose": true }]
]

See GitHub Issue:
https://github.com/babel/babel-plugin-proposal-private-property-in-object/issues/1

I tried to add "@babel/plugin-proposal-private-property-in-object": "^7.21.11" to devDependencies, and my CI=npm run build was successfully completed.

All you need to do to suppress the warning, is to open package.json and add

"@babel/plugin-proposal-private-property-in-object": "7.21.11", as described below. That would help you fix the issue.

"dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@babel/plugin-proposal-private-property-in-object": "7.21.11",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },

or you can simply run this

npm install --save-dev @babel/plugin-proposal-private-property-in-object

Note: this would target devDependencies

Also just started having this issue today. Added the recommended package to the devDependencies but also having no success.

Update: Updating my global yarn install (or maybe whatever your package manager of choice is) appears to fix the issue.

Follow Up: This fix worked for my development and host server but not my production node container.

I was working on a hobby project earlier today and got the same warning. You just have to add the entry for "@babel/plugin-proposal-private-property-in-object" under the devDependencies object with the installed version in your project. You can find the installed version for your project in the following path:

node_modules/@babel/plugin-proposal-private-property-in-object/package.json

Once you have this version, just update the entry as mentioned above in the main package.json file of the project (the one that has the run and test commands and so on).

Here are the contents of the package.json file I modified to get rid of the warning message:

{
  "name": "clothes_shop",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "devDependencies": {
    "@babel/plugin-proposal-private-property-in-object": "^7.21.0-placeholder-for-preset-env.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "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"
    ]
  }
}

</details>



# 答案9
**得分**: 2

你的一个依赖项，`babel-preset-react-app`，正在导入`@babel/plugin-proposal-private-property-in-object`包，但没有在其依赖项中声明它。

这目前能正常工作，因为`@babel/plugin-proposal-private-property-in-object`已经存在于你的`node_modules`文件夹中，但出于不相关的原因，它可能随时会出现问题。

`babel-preset-react-app`是*create-react-app*项目的一部分，该项目目前已不再维护。

因此，这个 bug 很可能永远不会被修复。

将`@babel/plugin-proposal-private-property-in-object`添加到你的*devDependencies*中以解决这个错误。这将使这个消息消失。

这个命令可以帮助你解决这个问题：

```bash
npm install --save-dev @babel/plugin-proposal-private-property-in-object --legacy-peer-deps

npm install --save-dev @babel/plugin-proposal-private-property-in-object --legacy-peer-deps

答案10

得分: 1

如果您更喜欢使用 yarn，这是等效的命令：

yarn add @babel/plugin-proposal-private-property-in-object --dev

yarn add @babel/plugin-proposal-private-property-in-object --dev

答案11

得分: 1

运行此命令：

npm install --save-dev @babel/plugin-proposal-private-property-in-object

npm install --save-dev @babel/plugin-proposal-private-property-in-object

答案12

得分: 0

I got this message on my VS code:

你好，我在我的VS Code上收到了以下消息：

One of your dependencies, babel-preset-react-app, is importing the
你的一个依赖项，babel-preset-react-app，正在导入

"babel/plugin-proposal-private-property-in-object" package without
“babel/plugin-proposal-private-property-in-object”包，但没有在其依赖项中声明。

declaring it in its dependencies. This is currently working because
这目前可行，因为它已经存在于你的node_modules文件夹中，但原因与此无关，但随时可能会出问题。

"@babel/plugin-proposal-private-property-in-object" is already in your
“@babel/plugin-proposal-private-property-in-object”已经存在于你的

node_modules folder for unrelated reasons, but it may break at any time.
node_modules文件夹中，但原因与此无关，但随时可能会出问题。

To sort this issue simply install what the warning is suggesting, I am using npm so just do:

为了解决这个问题，只需安装警告建议的内容，我使用npm，所以只需执行以下命令：

npm i @babel/plugin-proposal-private-property-in-object -D

-D means that its only for local development

-D表示它仅用于本地开发。

答案13

得分: 0

I realized I got this error because I am using Chakra UI, and using the private statement which is not readily available for older browsers.

我发现我出现这个错误是因为我正在使用Chakra UI，并且使用了private语句，这在较旧的浏览器中不容易获得。

I installed the package per the instructions here:
https://www.npmjs.com/package/@babel/plugin-proposal-private-property-in-object

我按照这里的说明安装了该包：
https://www.npmjs.com/package/@babel/plugin-proposal-private-property-in-object

npm install --save-dev @babel/plugin-proposal-private-property-in-object

Finally, I had to add a Babel file

最后，我必须添加一个Babel文件

.babelrc

{
"presets": ["@babel/preset-env", "@babel/preset-react"],
"plugins": ["@babel/plugin-proposal-private-property-in-object"]
}

npm install --save-dev @babel/plugin-proposal-private-property-in-object

.babelrc
{
"presets": ["@babel/preset-env", "@babel/preset-react"],
"plugins": ["@babel/plugin-proposal-private-property-in-object"]

答案14

得分: 0

TL;DR: 如果您正在使用单仓库（monorepo），您必须将开发依赖项添加到所讨论的 React 应用程序 和 根目录的 package.json，而不仅仅是 React 应用程序。

More fulsome answer: 如果您有一个单仓库（我正在使用 NPM Workspaces，但这也适用于其他单仓库），其中您的应用程序之一是所讨论的 React 应用程序，类似于：

├── apps
│   ├── my-express-api
│   │   └── package.json
│   └── my-cra-app
│       └── package.json
├── package.json
└── package-lock.json 

您需要将 @babel/plugin-proposal-private-property-in-object 的开发依赖项添加到您的 React 应用程序 和 单仓库的根目录的 package.json，类似于：

// 添加到应用程序
npm i @babel/plugin-proposal-private-property-in-object --save-dev -w my-cra-app
// ...并添加到根目录
npm i @babel/plugin-proposal-private-property-in-object --save-dev

├── apps
│   ├── my-express-api
│   │   └── package.json
│   └── my-cra-app
│       └── package.json
├── package.json
└── package-lock.json 

// add to app
npm i @babel/plugin-proposal-private-property-in-object --save-dev -w my-cra-app
// ... and to root
npm i @babel/plugin-proposal-private-property-in-object --save-dev

答案15

得分: 0

通过添加指定版本的这行代码，您告诉npm将版本7.21.11的

> @babel/plugin-proposal-private-property-in-object

包安装为依赖项。这可以帮助解决与插件相关的任何问题或抑制相关的警告。

注意: 在安装/构建应用程序时出现了一个警告：

> npm WARN deprecated
> @babel/plugin-proposal-private-property-in-object@7.21.11: This
> proposal has been merged to the ECMAScript standard and thus this
> plugin is no longer maintained. Please use
> @babel/plugin-transform-private-property-in-object instead.

我建议使用：

"@babel/plugin-transform-private-property-in-object": "^7.21.11" 

我的构建成功了

在进行此更改后，您应该 运行npm install 以确保指定版本的包已安装在您的项目中。

请注意，像这样指定一个固定版本可以帮助保持项目的一致性，但可能需要定期更新以跟上最新的包改进和安全更新。

"@babel/plugin-transform-private-property-in-object": "^7.21.11"