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:
- it’s a bug in babel-preset-react-app
- there has been a PR open to fix that bug since 2021 (https://github.com/facebook/create-react-app/pull/11751), and another one since May 2022 (https://github.com/facebook/create-react-app/pull/12364)
- create-react-app is not maintained anymore (https://twitter.com/rickhanlonii/status/1661930451517276161)
- we shipped a workaround in
@babel/preset-env@7.22.1
💻
- 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
- bug fix for this https://github.com/babel/babel/issues/15655 — committed to jackpaulcollins/path-buddy-app by jackpaulcollins 9 months ago
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 😃 )
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.@babel-bot your genius update even broke the sample app from react.
This is a bug in
babel-preset-react-app
: itrequire()
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.Make sure to update
@babel/preset-env
to7.22.3
(just replace the version in youdevDependencies
), then delete the three occurrences of"@babel/plugin-...-private-property-in-object"
since they are not needed anymore, and re-runnpm install
/yarn install
/pnpm install
(depending on which package manager you are using) to actually download the specified dependencies 😃https://www.npmjs.com/package/@babel/preset-env/v/7.22.1
@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.
As @nicolo-ribaudo said:
@nicolo-ribaudo Please tell me how could this be a
babel-preset-react-app
error since this bug occurred less than 3 hrs ago andbabel-preset-react-app
haven’t been updated since last September? Someone invented a “TimeMachine” ?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.
Thanks @bvaughn, I’ll release a workaround and then figure out how to contact 😃
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?
I’ll release a workaround on our side until CRA fixes it.