Build fails: Could not find plugin "proposal-numeric-separator" #8680

muehlbaueralex · 2020-03-20T16:59:46Z

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! [email protected] build: `react-scripts build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] 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

The text was updated successfully, but these errors were encountered:

adascal · 2020-03-20T17:15:14Z

Possible related to new babel-loader release (about 2 hours ago)
ref: https://github.com/babel/babel-loader/releases

Binbiubiubiu · 2020-03-20T17:23:18Z

me too

gonzofish · 2020-03-20T17:23:33Z

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

existentialism · 2020-03-20T17:25:34Z

This bug was fixed in Babel by babel/babel#11201, and here once #8620 gets released.

gonzofish · 2020-03-20T17:30:28Z

Thanks @existentialism! Is there any solution/workaround in the meantime?

marvelousdev0 · 2020-03-20T17:33:59Z

I’m using [email protected], but still have the issue

MKrupauskas · 2020-03-20T17:35:07Z

Ejecting and updating the babel dependency would be a way of fixing this in the meantime.

MMachado-uy · 2020-03-20T17:36:08Z

+1

m-malik15 · 2020-03-20T17:52:44Z

I am getting the same error when building angular 8 app in azure deveops pipeline

"An unhandled exception occurred: [BABEL] D:\a\1\s\dist\web\main-es2015.02f4b8f684805898bcff.js: Could not find plugin "proposal-numeric-separator". Ensure there is an entry in ./available-plugins.js for it. (While processing: "D:\a\1\s\node_modules\@babel\preset-env\lib\index.js")

jayc13 · 2020-03-20T17:59:05Z

+1

rachelruderman · 2020-03-20T18:32:51Z

~~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)

nicolo-ribaudo · 2020-03-20T18:32:52Z

⚠️ 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 #8680 (comment) for more detailed instructions for npm.

Memogcia · 2020-03-20T18:57:00Z

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

existentialism · 2020-03-20T22:25:20Z

@arinhouck just fyi, but your issue is a bit different, check out babel/babel#11298

premp-cloud · 2020-03-20T22:25:29Z

@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

arinhouck · 2020-03-20T22:28:32Z

@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",

I did this and now I got the error about proposal-numeric-seperator locally

nicolo-ribaudo · 2020-03-20T22:29:09Z

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

nicolo-ribaudo · 2020-03-20T22:29:41Z

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

arinhouck · 2020-03-20T22:32:47Z

7.8.7

I switched to those versions (7.8.7 and 7.9.0) then received my previous error again

(plugin babel) ReferenceError: /Users/arinhouck/Documents/github/homelight-react/packages/core-ui/src/index.js: Unknown helper createSuper

existentialism · 2020-03-20T22:33:44Z

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

nicolo-ribaudo · 2020-03-20T22:33:48Z

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

DatChoob · 2020-03-20T22:41:46Z

Looks like Yarn users are having an easier time fixing this issue? Might have to switch.
Still having problems with npm

carlos-soto · 2020-03-20T22:42:13Z

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

renatocassino · 2020-03-20T22:42:39Z

The same here, I'm using npm instead of yarn and the solution with resolution in package.json doesnt work

sebastianvz · 2020-03-20T22:43:39Z

@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 ?

nicolo-ribaudo · 2020-03-20T22:43:44Z

@tacnoman Try adding "@babel/compat-data": "7.8.0" to your dev dependencies, it might work (it's not guaranteed to, it depends on npm hoisting)

carlos-soto · 2020-03-20T22:48:37Z

@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",

TimKochDev · 2020-03-20T22:50:34Z

The problem is in babel-preset-react-app. For some reason when you install it, it strictly requires @babel/[email protected].

It looks like it's already updated to require @babel/[email protected] 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 until the issue outlined above is fixed.

Edit - Just want to add that I'm able to use [email protected]

All the suggested solutions did not work until I used preinstall hook! Now it works on localhost and on heroku in production mode.

ianschmitz · 2020-03-20T23:03:08Z

Locking the thread to cut down on the excessive spam. We're actively working to make sure this is resolved. Please be patient.

ianschmitz · 2020-03-20T23:10:59Z

~~Waiting on babel/babel#11298 to be merged and released then we should be able to bump the versions on our side and release (hopefully!).~~

We think #8681 should resolve this without the PR from babel side as we shouldn't encounter that specific scenario here.

ianschmitz · 2020-03-20T23:51:26Z

Looks like we've fixed in #8661. Will be releasing shortly. Thanks for the patience everyone!

ianschmitz · 2020-03-21T00:10:31Z

This should be fixed in the 3.4.1 release.

Update react-scripts to 3.4.1 in your package.json file and remove node_modules as well as package-lock.json/yarn.lock and re-install.

As always we recommend using and committing the package lock file to your repository.

muehlbaueralex added issue: bug report needs triage labels Mar 20, 2020