How to Resolve the Babel Error When Creating a New React Project

When creating a new React project, you may encounter a Babel error after adding the following line to your package.json file:

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

The error message typically looks like this:

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.

The error suggests adding "@babel/plugin-proposal-private-property-in-object" to your devDependencies to resolve the issue. Here are a few solutions that have worked for developers facing this problem:

Solution 1: Install the package using npm

Run the following command to install the package as a dev dependency:

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

Solution 2: Install the package using yarn

If you prefer using yarn, run the following command:

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

Solution 3: Add the package to your devDependencies manually

Open your package.json file and add the following entry to your devDependencies:

"devDependencies": {
  "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
  ...
}

Make sure to use the correct version number that matches your project's requirements.

Solution 4: Update your .babelrc file

Create a .babelrc file in the root of your project (if it doesn't already exist) and add the following configuration:

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

Note: As of 2024, the @babel/plugin-proposal-private-property-in-object package has been renamed to @babel/plugin-transform-private-property-in-object. If you encounter the warning about the deprecated package, use the following instead:

"devDependencies": {
  "@babel/plugin-transform-private-property-in-object": "^7.23.4",
  ...
}

After applying one of these solutions, run npm install or yarn install to ensure the package is properly installed in your project.

By adding the required Babel plugin to your project's dependencies, you should be able to resolve the error and continue developing your React application.