babel: [Bug]: v7.22.0 almost broke every react project

EDIT by @nicolo-ribaudo

If you see a Cannot find module '@babel/plugin-proposal-private-property-in-object' error when using babel-preset-react-app or create-react-app:

💻

  • Would you like to work on a fix?

How are you using Babel?

babel-loader (webpack)

Input code

npx create-react-app my-app
cd my-app
npm start

Configuration file name

No response

Configuration

No response

Current and expected behavior

 ⚡ root@miami  ~/my-app   master  npm start

> my-app@0.1.0 start
> react-scripts start

(node:55155) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
(Use `node --trace-deprecation ...` to show where the warning was created)
(node:55155) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
Starting the development server...
Failed to compile.

Error: [BABEL] /root/my-app/src/index.js: Cannot find module '@babel/plugin-proposal-private-property-in-object'
Require stack:
- /root/my-app/node_modules/babel-preset-react-app/create.js
- /root/my-app/node_modules/babel-preset-react-app/index.js
- /root/my-app/node_modules/@babel/core/lib/config/files/module-types.js
- /root/my-app/node_modules/@babel/core/lib/config/files/configuration.js
- /root/my-app/node_modules/@babel/core/lib/config/files/index.js
- /root/my-app/node_modules/@babel/core/lib/index.js
- /root/my-app/node_modules/@rollup/plugin-babel/dist/index.js
- /root/my-app/node_modules/workbox-build/build/lib/bundle.js
- /root/my-app/node_modules/workbox-webpack-plugin/build/generate-sw.js
- /root/my-app/node_modules/workbox-webpack-plugin/build/index.js
- /root/my-app/node_modules/react-scripts/config/webpack.config.js
- /root/my-app/node_modules/react-scripts/scripts/start.js (While processing: "/root/my-app/node_modules/babel-preset-react-app/index.js")
    at Generator.next (<anonymous>)
    at Generator.next (<anonymous>)
    at Generator.next (<anonymous>)
    at Generator.next (<anonymous>)
    at cachedFunction.next (<anonymous>)
    at loadPresetDescriptor.next (<anonymous>)
    at recursePresetDescriptors.next (<anonymous>)
    at Generator.next (<anonymous>)
    at loadFullConfig.next (<anonymous>)
    at transform.next (<anonymous>)
    at new Promise (<anonymous>)
    at Generator.next (<anonymous>)
    at new Promise (<anonymous>)
ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: [BABEL] /root/my-app/src/index.js: Cannot find module '@babel/plugin-proposal-private-property-in-object'
Require stack:
- /root/my-app/node_modules/babel-preset-react-app/create.js
- /root/my-app/node_modules/babel-preset-react-app/index.js
- /root/my-app/node_modules/@babel/core/lib/config/files/module-types.js
- /root/my-app/node_modules/@babel/core/lib/config/files/configuration.js
- /root/my-app/node_modules/@babel/core/lib/config/files/index.js
- /root/my-app/node_modules/@babel/core/lib/index.js
- /root/my-app/node_modules/@rollup/plugin-babel/dist/index.js
- /root/my-app/node_modules/workbox-build/build/lib/bundle.js
- /root/my-app/node_modules/workbox-webpack-plugin/build/generate-sw.js
- /root/my-app/node_modules/workbox-webpack-plugin/build/index.js
- /root/my-app/node_modules/react-scripts/config/webpack.config.js
- /root/my-app/node_modules/react-scripts/scripts/start.js (While processing: "/root/my-app/node_modules/babel-preset-react-app/index.js")
    at Module._resolveFilename (node:internal/modules/cjs/loader:1070:15)
    at Module._load (node:internal/modules/cjs/loader:923:27)
    at Module.require (node:internal/modules/cjs/loader:1137:19)
    at require (node:internal/modules/helpers:121:18)
    at module.exports (/root/my-app/node_modules/babel-preset-react-app/create.js:168:9)
    at module.exports (/root/my-app/node_modules/babel-preset-react-app/index.js:19:10)
    at async (/root/my-app/node_modules/@babel/core/lib/gensync-utils/async.js:36:33)
    at async (/root/my-app/node_modules/gensync/index.js:186:15)
    at /root/my-app/node_modules/gensync/index.js:216:13
    at Generator.next (<anonymous>)
    at /root/my-app/node_modules/@babel/core/lib/config/full.js:181:21
    at Generator.next (<anonymous>)
    at Function.<anonymous> (/root/my-app/node_modules/@babel/core/lib/gensync-utils/async.js:21:3)
    at Generator.next (<anonymous>)
    at step (/root/my-app/node_modules/gensync/index.js:269:25)
    at evaluateAsync (/root/my-app/node_modules/gensync/index.js:291:5)
    at Function.errback (/root/my-app/node_modules/gensync/index.js:113:7)
    at errback (/root/my-app/node_modules/@babel/core/lib/gensync-utils/async.js:66:18)
    at async (/root/my-app/node_modules/gensync/index.js:188:17)
    at onFirstPause (/root/my-app/node_modules/gensync/index.js:216:13)
    at Generator.next (<anonymous>)
    at cachedFunction (/root/my-app/node_modules/@babel/core/lib/config/caching.js:52:46)
    at cachedFunction.next (<anonymous>)
    at loadPresetDescriptor (/root/my-app/node_modules/@babel/core/lib/config/full.js:294:43)
    at loadPresetDescriptor.next (<anonymous>)
    at recursePresetDescriptors (/root/my-app/node_modules/@babel/core/lib/config/full.js:77:31)
    at recursePresetDescriptors.next (<anonymous>)
    at /root/my-app/node_modules/@babel/core/lib/config/full.js:157:21
    at Generator.next (<anonymous>)
    at loadFullConfig (/root/my-app/node_modules/@babel/core/lib/config/full.js:113:5)
    at loadFullConfig.next (<anonymous>)
    at transform (/root/my-app/node_modules/@babel/core/lib/transform.js:20:45)
    at transform.next (<anonymous>)
    at step (/root/my-app/node_modules/gensync/index.js:269:25)
    at evaluateAsync (/root/my-app/node_modules/gensync/index.js:291:5)
    at errback (/root/my-app/node_modules/gensync/index.js:113:7)
    at stopHiding - secret - don't use this - v1 (/root/my-app/node_modules/@babel/core/lib/errors/rewrite-stack-trace.js:46:12)
    at transform (/root/my-app/node_modules/@babel/core/lib/transform.js:39:72)
    at node:internal/util:410:7
    at new Promise (<anonymous>)
    at transform (node:internal/util:396:12)
    at /root/my-app/node_modules/babel-loader/lib/transform.js:15:22
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (/root/my-app/node_modules/babel-loader/lib/transform.js:3:103)
    at _next (/root/my-app/node_modules/babel-loader/lib/transform.js:4:194)
    at /root/my-app/node_modules/babel-loader/lib/transform.js:4:364
    at new Promise (<anonymous>)
    at /root/my-app/node_modules/babel-loader/lib/transform.js:4:97
    at /root/my-app/node_modules/babel-loader/lib/transform.js:48:17
    at /root/my-app/node_modules/babel-loader/lib/cache.js:130:26

ERROR in [eslint]
src/index.js
  Line 0:  Parsing error: [BABEL] /root/my-app/src/index.js: Cannot find module '@babel/plugin-proposal-private-property-in-object'
Require stack:
- /root/my-app/node_modules/babel-preset-react-app/create.js
- /root/my-app/node_modules/babel-preset-react-app/index.js
- /root/my-app/node_modules/@babel/core/lib/config/files/module-types.js
- /root/my-app/node_modules/@babel/core/lib/config/files/configuration.js
- /root/my-app/node_modules/@babel/core/lib/config/files/index.js
- /root/my-app/node_modules/@babel/core/lib/index.js
- /root/my-app/node_modules/@rollup/plugin-babel/dist/index.js
- /root/my-app/node_modules/workbox-build/build/lib/bundle.js
- /root/my-app/node_modules/workbox-webpack-plugin/build/generate-sw.js
- /root/my-app/node_modules/workbox-webpack-plugin/build/index.js
- /root/my-app/node_modules/react-scripts/config/webpack.config.js
- /root/my-app/node_modules/react-scripts/scripts/start.js (While processing: "/root/my-app/node_modules/babel-preset-react-app/prod.js")

webpack compiled with 2 errors

Environment

Ubuntu 23.04 Node 22.2.0 nom 9.6.7

Possible solution

No response

Additional context

Thanks to this genius update 2 hrs ago which almost drove everyone crazy.

About this issue

  • Original URL
  • State: closed
  • Created a year ago
  • Comments: 31 (17 by maintainers)

Commits related to this issue

Most upvoted comments

Hey people, if you appreciate how quick was the turnaround from issue reported to problem fixed (not even commercial products do it in just 35 minutes!) you can help us by getting your company to donate to ensure Babel’s continued maintenance!

We use OpenCollective, a platform used by many open source projects: https://opencollective.com/babel

I see some big companies in the GitHub profiles of y’all, so hopefully it will be possible! (I found @dell for example, and most of my commits in this repository have been written from Dell PCs 😃 )

+6
nicolo-ribaudo on May 26, 2023

We are publishing @babel/preset-env@7.22.1 adding the (unnecessary, for @babel/preset-env) dependency back. It will be on npm in ~5 minutes.

+6
nicolo-ribaudo on May 26, 2023

@babel-bot your genius update even broke the sample app from react.

+6
realJustinLee on May 26, 2023

This is a bug in babel-preset-react-app: it require()s @babel/plugin-proposal-private-property-in-object (https://github.com/facebook/create-react-app/blob/d960b9e38c062584ff6cfb1a70e1512509a966e7/packages/babel-preset-react-app/create.js#L168) without specifying it in its "dependencies": (https://github.com/facebook/create-react-app/blob/d960b9e38c062584ff6cfb1a70e1512509a966e7/packages/babel-preset-react-app/package.json#L23-L39) – cc @babel/react Could you do anything about it?

@realJustinLee As a workaround, you can add @babel/plugin-proposal-private-property-in-object to your dependencies in your package.json.

+5
nicolo-ribaudo on May 26, 2023

Make sure to update @babel/preset-env to 7.22.3 (just replace the version in you devDependencies), then delete the three occurrences of "@babel/plugin-...-private-property-in-object" since they are not needed anymore, and re-run npm install/yarn install/pnpm install (depending on which package manager you are using) to actually download the specified dependencies 😃

+2
nicolo-ribaudo on May 30, 2023

https://www.npmjs.com/package/@babel/preset-env/v/7.22.1

+2
nicolo-ribaudo on May 26, 2023

@realJustinLee https://github.com/babel/babel/issues/15655#issuecomment-1564616914

The list of dependencies of a package is not part of its public API, and babel-preset-react-app was accidentally relying on the list of dependencies of Babel.

+2
nicolo-ribaudo on May 26, 2023

@nicolo-ribaudo Please tell me how could this be a babel-preset-react-app error since this bug occurred less than 3 hrs ago and babel-preset-react-app haven’t been updated since last September? Someone invented a “TimeMachine” ?

As @nicolo-ribaudo said:

CRA imports a package without declaring it in its dependency. That package was a dependency of Babel so CRA was lucky that it was in node_modules. Now Babel doesn’t depend on that package anymore.

+2
existentialism on May 26, 2023

@nicolo-ribaudo Please tell me how could this be a babel-preset-react-app error since this bug occurred less than 3 hrs ago and babel-preset-react-app haven’t been updated since last September? Someone invented a “TimeMachine” ?

+2
realJustinLee on May 26, 2023

Fwiw, there has been a PR open for one year and a half to fix this bug in create-react-app: https://github.com/facebook/create-react-app/pull/11751

Unfortunately it looks like that project is not maintained anymore.

+1
nicolo-ribaudo on May 26, 2023

Thanks @bvaughn, I’ll release a workaround and then figure out how to contact 😃

+1
nicolo-ribaudo on May 26, 2023

All my build pipelines just failed - I’ve added to my package.json “dependencies”: { “@babel/plugin-proposal-private-property-in-object” : “*”,

This doesn’t resolve the issue - is there something else I should be doing?

+1
martinpyman on May 26, 2023

I’ll release a workaround on our side until CRA fixes it.

+1
nicolo-ribaudo on May 26, 2023
Read more comments on GitHub
← babel: [BUG] "Unknown plugin" in linked or aliased modules while using babel-loader in Webpack. (T6942)
babel: Bug: wrong unicode regexp →