babel-preset-react-app dependency error - Yarn 3

[Mezzle]

Describe the bug

When attempting to use create-react-app with yarn 3, running the scripts returns the following error

Error: [BABEL] src/index.tsx: babel-preset-react-app tried to access @babel/plugin-proposal-private-property-in-object, but it isn't declared in its dependencies; this makes the require call ambiguous and unsound.

Did you try recovering your dependencies?

3.1.1

Which terms did you search for in User Guide?

N/A

Environment

  current version of create-react-app: 4.0.3
  running from /Users/mez/.npm/_npx/c67e74de0542c87c/node_modules/create-react-app

  System:
    OS: macOS 12.1
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
  Binaries:
    Node: 14.18.1 - ~/.nvm/versions/node/v14.18.1/bin/node
    Yarn: 3.1.1 - ~/.nvm/versions/node/v14.18.1/bin/yarn
    npm: 8.1.2 - ~/.nvm/versions/node/v14.18.1/bin/npm
  Browsers:
    Chrome: Not Found
    Edge: Not Found
    Firefox: Not Found
    Safari: 15.2
  npmPackages:
    react: Not Found
    react-dom: Not Found
    react-scripts: Not Found
  npmGlobalPackages:
    create-react-app: Not Found

Steps to reproduce

mkdir foo
cd foo
yarn set version berry
yarn create react-app . --template all
yarn start

Expected behavior

App would start

Actual behavior

Multitude of errors, including the above regarding issue with dependency (others are resolvable by adding the dependencies manually)

Reproducible demo

https://github.com/Mezzle/cra-yarn-bug-example

[raix]

Thanks @Mezzle for reporting, we likely need to add @babel/plugin-proposal-private-property-in-object in the babel-preset-react-app package as a dependency in package.json

[adamtowerz]

11751 seems like it will fix this.

[kevingilbert100]

+1

[raix]

Thanks! #11751 is added to 5.0.1 milestone

[kevingilbert100]

Is there a temporary fix for this, it seems I cannot use CRA with yarn workspaces currently

[llimos]

Add to your .yarnrc.yml:

packageExtensions:
  babel-preset-react-app@*:
    dependencies:
      "@babel/plugin-proposal-private-property-in-object": "*"

[quisido]

In addition to what @llimos said, you also need to run yarn install afterwards to update your yarn.lock file with this change.

[WegDamit]

why not just "yarn add @babel/plugin-proposal-private-property-in-object" ?

[quisido]

why not just "yarn add @babel/plugin-proposal-private-property-in-object" ?

Because that doesn't resolve the warning. That adds it to your package.json, which - as the error states - makes the import ambiguous and unsound.

[msotho]

Added this to my .yarnrc.yml file

nodeLinker: node-modules

yarnPath: .yarn/releases/yarn-3.1.1.cjs

Seems to have resolved it

[trohr]

This issue seems to be solved for us after upgrading create-react-app to 5.0.1 (and yarn to 3.3.1).

We have previously used solution provided by Ilimos (https://github.com/facebook/create-react-app/issues/11793#issuecomment-998230832). Now yarn start & yarn build works for us with that workaround removed from .yarnrc.yml.

[bharat407]

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 maintained anymore. It is thus unlikely that this bug will ever be fixed. If you are starting a new project, you may consider using maintained alternatives such as Vite (https://vitejs.dev/) instead.

Add "@babel/plugin-proposal-private-property-in-object" to your devDependencies to work around this error. This will make this message go away.

How to resolve it

[trohr]

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 maintained anymore. It is thus unlikely that this bug will ever be fixed. If you are starting a new project, you may consider using maintained alternatives such as Vite (https://vitejs.dev/) instead.

Add "@babel/plugin-proposal-private-property-in-object" to your devDependencies to work around this error. This will make this message go away.

How to resolve it

Hi. How is that CRA is not maintained anymore? You are writing in CRA issues list :-D Isn't this just some advertisement of the Vite project? :D

[bharat407]

Thanks

On Mon, Jun 5, 2023 at 9:34 PM trohr @.***> wrote:

One of your dependencies, babel-preset-react-app, is importing the @./plugin-proposal-private-property-in-object" package without declaring it in its dependencies. This is currently working because @./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 maintained anymore. It is thus unlikely that this bug will ever be fixed. If you are starting a new project, you may consider using maintained alternatives such as Vite (https://vitejs.dev/) instead.

Add @.***/plugin-proposal-private-property-in-object" to your devDependencies to work around this error. This will make this message go away.

How to resolve it

Hi. How is that CRA is not maintained anymore? You are writing in CRA issues list :-D Isn't this just some advertisement of the Vite project? :D

— Reply to this email directly, view it on GitHub https://github.com/facebook/create-react-app/issues/11793#issuecomment-1577076112, or unsubscribe https://github.com/notifications/unsubscribe-auth/AUL3RSRQL3EWOVPEIVFFQZTXJX7RHANCNFSM5KJPM6WQ . You are receiving this because you commented.Message ID: @.***>

[hock6191]

NGATTFPVV