Fixing Missing Babel Plugin Error in React Apps

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...

Why This Error Occurs

This warning appears in React apps created with create-react-app because:

1. babel-preset-react-app requires @babel/plugin-proposal-private-property-in-object
2. This dependency wasn't properly declared in the package
3. The create-react-app project is no longer actively maintained
4. Private properties are a new JavaScript feature requiring special transpilation

::: note The @babel/plugin-proposal-private-property-in-object package was renamed to @babel/plugin-transform-private-property-in-object as the proposal became a standard ECMAScript feature. :::

Recommended Solution: Use Updated Transform Plugin

1. Install the Renamed Package

npm

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

yarn

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

2. Update Your package.json

Ensure your devDependencies now reference the updated package:

{
  "devDependencies": {
    // Existing dependencies
    "react-scripts": "5.0.1",
    // Add the following line:
    "@babel/plugin-transform-private-property-in-object": "^7.23.4"
  }
}

Deprecated Package Notice

Avoid installing the old package name (@babel/plugin-proposal-private-property-in-object). The npm install will warn you:

npm WARN deprecated @babel/plugin-proposal-private-property-in-object@...
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.

Alternative Fixes and Troubleshooting

If Using TypeScript

Update TypeScript to resolve dependency conflicts:

npm install typescript@latest

For Monorepos

Add the dependency in both your React app and root project:

# Workspace project
npm install --save-dev @babel/plugin-transform-private-property-in-object -w your-react-app

# Root project
npm install --save-dev @babel/plugin-transform-private-property-in-object

Clean Installation Approach

When dependency trees are corrupted:

1. Delete node_modules and package-lock.json
2. Clean npm cache:

npm cache clean --force

3. Reinstall dependencies:

npm install

Folder Path Issues

If your project path contains special characters (like #), change to a simpler directory path:

# Bad
C:\C#\my-react-app

# Good
C:\Projects\my-react-app

Legacy Peer Dependency Conflict Resolution

If facing peer dependency conflicts:

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

Understanding The Problem

Why You See This Error

The issue stems from:

Package Resolution Workflow

When using the updated solution:

Preventing Future Issues

1. Keep dependencies updated: Run npm outdated regularly
2. Consider migration: Since create-react-app is unmaintained, evaluate alternatives like:
   • Vite
   • Next.js
   • Remix
3. Use dependency scanners: Tools like npm audit
4. Check project path: Avoid special characters

TIP

The @babel/plugin-transform-private-property-in-object dependency is only needed during development and build. It doesn't ship to production.