create-react-app: Build fails: Could not find plugin "proposal-numeric-separator"

Describe the bug

Running npm run build will fail on any project, even on a vanilla app created with create-react-app will fail with the following error:

Error: [BABEL] /Users/<username>/Projects/my-app/src/index.js: Could not find plugin "proposal-numeric-separator". Ensure there is an entry in ./available-plugins.js for it. (While processing: "/Users/<username>/Projects/my-app/node_modules/babel-preset-react-app/index.js$0")
    at Array.map (<anonymous>)
    at Generator.next (<anonymous>)
    at Generator.next (<anonymous>)


npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! my-app@0.1.0 build: `react-scripts build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the my-app@0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

From our build pipelines I can tell it started roughly around Mar 20, 2020 4:48pm GMT+0100

Did you try recovering your dependencies?

I tried recovering the module tree and even verified with a vanilla app. It happens on my local machine and on our build machines with no changes involved there.

$ npm --version
6.13.1

Which terms did you search for in User Guide?

(Write your answer here if relevant.)

Environment

$ npx create-react-app --info

Environment Info:

  System:
    OS: macOS 10.15.3
    CPU: (8) x64 Intel(R) Core(TM) i7-8559U CPU @ 2.70GHz
  Binaries:
    Node: 13.2.0 - /usr/local/bin/node
    Yarn: 1.19.2 - /usr/local/bin/yarn
    npm: 6.13.1 - /usr/local/bin/npm
  Browsers:
    Chrome: 80.0.3987.149
    Firefox: 68.0.2
    Safari: 13.0.5
  npmPackages:
    react: ^16.13.1 => 16.13.1
    react-dom: ^16.13.1 => 16.13.1
    react-scripts: 3.4.0 => 3.4.0
  npmGlobalPackages:
    create-react-app: Not Found

Steps to reproduce

npx create-react-app my-app
cd my-app
npm run build

Expected behavior

The build is successful with no error.

Reproducible demo

As mentioned in the above sections a vanilla app is enough to reproduce.

npx create-react-app my-app
cd my-app
npm run build

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 223
Comments: 79 (7 by maintainers)

Commits related to this issue

Workaround for deploy to work. Source: https://github.com/facebook/create-react-app/issues/8680#issuecomment-601846409 — committed to AlbertoPdRF/weather-app by AlbertoPdRF 4 years ago
🚑 Fix babel build Workaround from https://github.com/facebook/create-react-app/issues/8680#issuecomment-601851525 — committed to pauloo27/homepage by pauloo27 4 years ago
temporary fix for: https://github.com/facebook/create-react-app/issues/8680 hard-code dependency for now — committed to wilfred-dev/website by vilhelmprytz 4 years ago
Resolve Babel problem https://github.com/facebook/create-react-app/issues/8680#issuecomment-601851525 — committed to JannickFaber/covidiary by iGore 4 years ago

Most upvoted comments

⚠️ Workaround ⚠️

If you are using yarn, you can add this to your package.json:

"resolutions": {
  "@babel/preset-env": "^7.8.7"
}

If you are using npm, you can do the same thing but also need npm-force-resolutions

Then, don’t forget to run yarn install or npm install.

EDIT: See https://github.com/facebook/create-react-app/issues/8680#issuecomment-601896916 for more detailed instructions for npm.

+57

nicolo-ribaudo on Mar 20, 2020

For people who are looking for npm version of @nicolo-ribaudo 's workaround, here are the exact steps I took:

delete node_modules and package-lock.json
add "resolutions": { "@babel/preset-env": "^7.8.7" } to package.json
npm install npm-force-resolutions --save-dev
npm install
npx npm-force-resolutions
npm install again
npm run build

+53

mohsenari on Mar 20, 2020

Hey everyone, thumbs up the original post. Adding “me too” just becomes noise to the maintainers

+38

gonzofish on Mar 20, 2020

This bug was fixed in Babel by https://github.com/babel/babel/pull/11201, and here once https://github.com/facebook/create-react-app/pull/8620 gets released.

+27

existentialism on Mar 20, 2020

This is what we get for deploying on a Friday… haha

Thanks everyone for the quick responses and easy workarounds! The package.json fix from @nicolo-ribaudo worked for us as well.

+15

aleciavogel on Mar 20, 2020

For quick fix you can eject and downgrade babel-preset-react-app to 9.0.0(maybe more recent will work too)

Do you have a link on how I can achieve this? New to React/Node.

npm run eject
Open package.json and set "babel-preset-react-app": "9.0.0" (note: use exactly “9.0.0”, not “^9.0.0”)
npm i

+15

Lukavyi on Mar 20, 2020

~~Quick fix: Downgrading to "react-scripts": "^2.1.5", worked for my team!! No ejection necessary~~

EDIT: update thanks to @mohsenari:

I strongly suggest not using this as it results in 88 vulnerabilities from npm audit. added 1940 packages from 744 contributors and audited 40593 packages in 44.492s found 88 vulnerabilities (81 low, 2 moderate, 5 high)

+12

rachelruderman on Mar 20, 2020

Still broken?

+11

vilhelmprytz on Mar 20, 2020

affecting me as well.

floofydoug on Mar 20, 2020

jayc13 on Mar 20, 2020

Rolling back react-scripts to 3.0.0 worked for me. Decided to go this route because it did not require ejecting or changing our build script to include the force resolve thing.

ChristopherTrimboli on Mar 20, 2020

For people who are looking for npm version of @nicolo-ribaudo 's workaround, here are the exact steps I took:

delete node_modules and package-lock.json

add "resolutions": { "@babel/preset-env": "^7.8.7" } to package.json

npm install npm-force-resolutions --save-dev

npm install

npx npm-force-resolutions

npm install again

npm run build

I had to add SKIP_PREFLIGHT_CHECK=true to .env file to make the build work without ejecting

xameeramir on Mar 20, 2020

WARNING running command eject is one-way operation.

thanks to @nicolo-ribaudo, the solution works with react-scripts 3.3.1

As @leetmachine says delete node_modules and yarn.lock

Memogcia on Mar 20, 2020

"resolutions": {
  "@babel/preset-env": "^7.8.7"
}

This worked for me as did the downgrading of react-scripts separately.

anthonyikeda on Mar 20, 2020

The problem is in babel-preset-react-app. For some reason when you install it, it strictly requires @babel/preset-env @7.8.4.

It looks like it’s already updated to require @babel/preset-env @7.8.7 11 days ago in the package.json for babel-preset-react-app.

I had to use the workaround above combined with using the npm-force-resolutions* package.

"scripts": {
  "preinstall": "npx npm-force-resolutions",
  ...
},
"resolutions": {
  "@babel/preset-env": "^7.8.7"
}

*Note that this requires a complete package-lock.json with the transitive dependencies that need updating.

This should only need to be done temporarily until the issue outlined above is fixed.

Edit - Just want to add that I’m able to use react-scripts@3.4.0

salih7 on Mar 20, 2020

@stenwie0591 our team is also experiencing error on Heroku deploy for a node react app using yarn. Workaround is not doing anything for us either. We are seeing the following error:
[!] (plugin babel) ReferenceError: /tmp/build_4c6997ef6fd5b4162d9721111196c3c8/packages/core-ui/src/index.js: Unknown helper createSuper
Not seeing the issue happen when building locally, however specified "@babel/preset-env": "^7.8.0", and ran yarn install and then it reproduced locally. It seems like heroku is bumping or not respecting lock file?
if it is bumping or not respecting then remove the caret likes this: "@babel/preset-env": "7.8.0",
Heroku updates the dependencies - hence the error. We got this locally itself. npm update was good but the error appeared in npm start.

Starting the development server… Failed to compile. ./node_modules/react-dev-utils/webpackHotDevClient.js Error: [BABEL] C:\projects\react\node_modules\react-dev-utils\webpackHotDevClient.js: Could not find plugin “proposal-numeric-separator”. Ensure there is an entry in ./available-plugins.js for it. (While processing: “C:\projects\react\node_modules\babel-preset-react-app\dependencies.js$0”) at Array.map () at Generator.next ()

Tried with “react-scripts”: “3.4.0”, and “react-scripts”: “3.4.0” - no success. Changed @babel/preset-env": “^7.8.7” - no success
I had to downgrade “react-scripts” to “3.0.0” for now, thee npm-force-resolutions approach didn’t work for me on npm.
How did you do the downgrade ?

Just change your package.json to: “react-scripts”: “3.0.0”,

carlos-soto on Mar 20, 2020

@arinhouck 7.8.0-7.8.6 are the broken version. Try 7.8.7, 7.7.0 or 7.9.0.

nicolo-ribaudo on Mar 20, 2020

⚠️

Please add 👍 to existing comments if a solution worked for you, or if you have the same problem. New comments which don’t add new information don’t help.

nicolo-ribaudo on Mar 20, 2020

@stenwie0591 our team is also experiencing error on Heroku deploy for a node react app using yarn. Workaround is not doing anything for us either.

We are seeing the following error:

[!] (plugin babel) ReferenceError: /tmp/build_4c6997ef6fd5b4162d9721111196c3c8/packages/core-ui/src/index.js: Unknown helper createSuper

Not seeing the issue happen when building locally, however specified "@babel/preset-env": "^7.8.0", and ran yarn install and then it reproduced locally. It seems like heroku is bumping or not respecting lock file?

arinhouck on Mar 20, 2020

./src/index.jsx Error: [BABEL] ndex.jsx: Could not find plugin “proposal-numeric-separator”. Ensure there is an entry in ./available-plugins.js for it. (While processing: “node_modules/babel-preset-react-app/index.js$0”) at Array.map (<anonymous>) at Generator.next (<anonymous>) at Generator.next (<anonymous>)

cristianounix on Mar 20, 2020

I get this with preset-env workaround:

(venv-3.7.5) ➜  react git:(gene/fix-travis-20200320) ✗ npm install

> switchboard-react@0.1.0 preinstall /Users/thinkjones/switchboard/distillerizer/react
> npx npm-force-resolutions

npx: installed 5 in 2.693s
ENOENT: no such file or directory, open './package-lock.json'
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! switchboard-react@0.1.0 preinstall: `npx npm-force-resolutions`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the switchboard-react@0.1.0 preinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/thinkjones/.npm/_logs/2020-03-20T19_41_51_842Z-debug.log

geneswitch on Mar 20, 2020

@stenwie0591 our team is also experiencing error on Heroku deploy for a node react app using yarn. Workaround is not doing anything for us either. We are seeing the following error:
[!] (plugin babel) ReferenceError: /tmp/build_4c6997ef6fd5b4162d9721111196c3c8/packages/core-ui/src/index.js: Unknown helper createSuper
Not seeing the issue happen when building locally, however specified "@babel/preset-env": "^7.8.0", and ran yarn install and then it reproduced locally. It seems like heroku is bumping or not respecting lock file?
if it is bumping or not respecting then remove the caret likes this: "@babel/preset-env": "7.8.0",
Heroku updates the dependencies - hence the error. We got this locally itself. npm update was good but the error appeared in npm start.

Starting the development server… Failed to compile. ./node_modules/react-dev-utils/webpackHotDevClient.js Error: [BABEL] C:\projects\react\node_modules\react-dev-utils\webpackHotDevClient.js: Could not find plugin “proposal-numeric-separator”. Ensure there is an entry in ./available-plugins.js for it. (While processing: “C:\projects\react\node_modules\babel-preset-react-app\dependencies.js$0”) at Array.map () at Generator.next ()

Tried with “react-scripts”: “3.4.0”, and “react-scripts”: “3.4.0” - no success. Changed @babel/preset-env": “^7.8.7” - no success
I had to downgrade “react-scripts” to “3.0.0” for now, thee npm-force-resolutions approach didn’t work for me on npm.
How did you do the downgrade ?
Just change your package.json to: “react-scripts”: “3.0.0”,

Doesn`t work for me

sebastianvz on Mar 20, 2020

same problem 😃

Wremeker on Mar 20, 2020

@arinhouck We have an open PR for that, I hope to release it soon.

nicolo-ribaudo on Mar 20, 2020

@arinhouck see my message above re: Unknown helper createSuper 😃

existentialism on Mar 20, 2020

+1. Breaking the build on friday afternoon… for shame!

Please note that we fixed this bug 2 weeks ago in @babel/preset-env 7.8.7 😉

FYI, the bug was that @babel/preset-env 7.8.0-7.8.6 throw if we add any new feature to newer preset-env versions.

nicolo-ribaudo on Mar 20, 2020

@arinhouck for me the error is:

Error: [BABEL] /tmp/build_9bf569961355c452d38b6129ae4a762b/client/src/index.jsx: Could not find plugin “proposal-numeric-separator”. Ensure there is an entry in ./available-plugins.js for it. (While processing: “/tmp/build_9bf569961355c452d38b6129ae4a762b/client/node_modules/babel-preset-react-app/index.js$0”)

I did a lot of rollback for a definitely working versions but still get the same error. I hope fix soon.

stenwie0591 on Mar 20, 2020

I found the same error during a deploy on Heroku. Has this happened to anyone else? ps. i tried also for the Workaround, but it didn’t worked!

stenwie0591 on Mar 20, 2020

@mohsenari what version of your babel-preset-env ?

its 7.8.4

Nirmal-Patel-Aleri on Mar 20, 2020

@mohsenari Is there a specific version of react-scripts required for this workaround?

@cph2117 I don’t believe so, I tested in two instances one with “react-scripts”: “3.3.0” and another with “react-scripts”: “3.4.0” in package.json

mohsenari on Mar 20, 2020

For people who are looking for npm version of @nicolo-ribaudo 's workaround, here are the exact steps I took:

delete node_modules and package-lock.json

add "resolutions": { "@babel/preset-env": "^7.8.7" } to package.json

npm install npm-force-resolutions --save-dev

npm install

npx npm-force-resolutions

npm install again

npm run build

@mohsenari Is there a specific version of react-scripts required for this workaround?

cph2117 on Mar 20, 2020

⚠️ Workaround ⚠️

If you are using yarn, you can add this to your package.json:
"resolutions": {
  "@babel/preset-env": "^7.8.7"
}
If you are using npm, you can do the same thing but also need npm-force-resolutions

Then, don’t forget to run yarn install or npm install.

Thanks, worked for me 👍

Demerjianm on Mar 20, 2020

I get this with preset-env workaround:

(venv-3.7.5) ➜  react git:(gene/fix-travis-20200320) ✗ npm install

> switchboard-react@0.1.0 preinstall /Users/thinkjones/switchboard/distillerizer/react
> npx npm-force-resolutions

npx: installed 5 in 2.693s
ENOENT: no such file or directory, open './package-lock.json'
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! switchboard-react@0.1.0 preinstall: `npx npm-force-resolutions`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the switchboard-react@0.1.0 preinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/thinkjones/.npm/_logs/2020-03-20T19_41_51_842Z-debug.log

I used these steps successfully–based on the excellent workarounds listed above, just consolidated multiple steps:

Install npm-force-resolutions npm i npm-force-resolutions --save-dev
Modify package.json

"resolutions": {
    "@babel/preset-env": "^7.8.7"
  },

Run force-resolutions npx npm-force-resolutions

nadeemc on Mar 20, 2020

I’m using babel-loader@8.0.6, but still have the issue

marvelousdev0 on Mar 20, 2020