Create-react-app: `npm run build` fails to compile on a fresh unmodified CRA app ("Class constructor Parser cannot be invoked without 'new'")

[jebeck]

Describe the bug

Completely fresh and unmodified create-react-app app fails to build with npm run build. Error is Class constructor Parser cannot be invoked without 'new':

Did you try recovering your dependencies?

Probably N/A since completely fresh, unmodified output of initial npx create-react-app... command, but yep, I did try. Did not help.

Which terms did you search for in User Guide?

Had a glance through the build section again, searched Google, and searched issues here for the specific error.

Environment

  current version of create-react-app: 3.4.1
  running from /Users/janabeck/.npm/_npx/50873/lib/node_modules/create-react-app

  System:
    OS: macOS 10.15.6
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
  Binaries:
    Node: 12.18.3 - /var/folders/pq/gd8qpx2s5b95t3jnvrrx0nh40000gq/T/fnm-shell-2477482/bin/node
    Yarn: Not Found
    npm: 6.14.8 - /var/folders/pq/gd8qpx2s5b95t3jnvrrx0nh40000gq/T/fnm-shell-2477482/bin/npm
  Browsers:
    Chrome: 85.0.4183.102
    Firefox: Not Found
    Safari: 13.1.2
  npmPackages:
    react: Not Found
    react-dom: Not Found
    react-scripts: Not Found
  npmGlobalPackages:
    create-react-app: Not Found

And my coworker's, who verified the failure:

Environment Info:
  current version of create-react-app: 3.4.1
  running from /Users/robertharris/.npm/_npx/92901/lib/node_modules/create-react-app
  System:
    OS: macOS 10.15.6
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
  Binaries:
    Node: 14.9.0 - /usr/local/bin/node
    Yarn: Not Found
    npm: 6.14.7 - /usr/local/bin/npm
  Browsers:
    Chrome: 85.0.4183.102
    Firefox: Not Found
    Safari: 13.1.2
  npmPackages:
    react: ^16.13.1 => 16.13.1 
    react-dom: ^16.13.1 => 16.13.1 
    react-scripts: 3.4.3 => 3.4.3 
  npmGlobalPackages:
    create-react-app: Not Found

Steps to reproduce

1. npx create-react-app foo
2. cd foo/
3. npm run build

I also tried npx [email protected]... to see if going back one minor version would change anything, but the result was the same.

Expected behavior

A fresh unmodified CRA app should build successfully.

Actual behavior

(Same screenshot as above.)

Reproducible demo

Pushed my fresh unmodified CRA app here: https://github.com/jebeck/cra-build-failure

So just clone, npm i, and npm run build. I have also tested on a 3rd machine (in addition to mine and my coworker's) and I get the same failure.

[davidboschwitz]

Appears to be related to https://github.com/postcss/postcss-scss/issues/111

[facultymatt]

I've been running create-react app all day and just got this issue within the last couple hours. Odd, I noticed on the Github releases tab the latest stable is 3.4.1: https://github.com/facebook/create-react-app/releases

While on NPM there is a 3.4.2 and 3.4.3 release - Github doesn't seem area of this...

@davidboschwitz the last commit from about 1hr ago (when CRA broke for me) is related to postcss - but it should only touch the 4.x release

Maybe something got bumped and released to npm on a local dev machine ? 🙈

[maxabrams]

+1. Has been working all day and recently (within the hour) began failing. Targeting specific, previous versions in package.json has no impact. We cannot build any React projects (new or existing).

[erikig]

+1. Likewise. Targeting CRA 3.4.* or 3.3.* doesn't resolve the issue. npm start seems to work ok.

[davidboschwitz]

Two more issues that seem to be related to this one, see below.

@maxabrams and I have a theory that it may be related to an upstream npm package dependency of react-scripts. Would be great if we could get a more verbose log output to see where this type error is being thrown. @facultymatt do you have any resources that we could use to investigate further

Issues related:
https://github.com/Uniswap/uniswap-interface/issues/1109
https://github.com/vuejs/docs-next/issues/488

[cocodrino]

I'm getting the same error, this is very critical, our deployments are not working right now :flushed:

[NiyongaboEric]

I have the same issue the react-scripts: ^3.4.0 working. I updated to react-scripts: ^3.4.3 and I am getting the error Class constructor Parser cannot be invoked without 'new'. Any support is highly appreciated.

[adithya1310]

All our deployments failed due to this error. Quick fix is highly appreciated

[maxabrams]

If you still have any device/build environment that has an unaffected node modules cache: As a temporary workaround (hack) we are manually copying a cached version of node_modules and neglecting to run npm install to circumvent the upstream dependency changes.

[Kienan6]

Another one here, of course it happens when experimenting with something new. Thought I was the only one with this error.

[impodracer]

I think I found the problem.
I had the same issue even though the project has ejected from CRA long ago. (Project doesn't have lock file)
It might be a problem of [email protected] and if I changes yarn.lock ([email protected] to [email protected]), build runs successfully.

[salvoravida]

add "postcss": "7.0.32" to your package.json

[davidboschwitz]

I can't sign the CLA due to a non-compete agreement with my employer. The necessary changes are in https://github.com/facebook/create-react-app/pull/9658 if someone else wants to do the change, and submit a pull request that is not on my behalf or that of my employer.

[erikig]

Thanks @pasdoy - the issue is under review https://github.com/postcss/postcss/issues/1412 but this works if you have access to the command line.

npm install [email protected]
npm cache verify

[MoonTory]

Opened a pull request #9660 with the fix @davidboschwitz provided.

[ai]

The fix was released in PostCSS 7.0.34.

If you want t say thanks for the quick night fix, our PostCSS Open Collective will be the best option

[salvoravida]

https://github.com/facebook/create-react-app/pull/9659

[davidboschwitz]

Should be good with the fix @ai provided. My fix should no longer be needed.

This was cool to see the development community investigate and resolve a pipeline blocking issue in under 3 hours. Thanks everyone for you help and contributions!

[MoonTory]

I can confirm after testing locally & in our project ci's that the issue has been resolved with the release of PostCSS 7.0.34, our pipelines have been restored! Thank @ai for the fix.

[NiyongaboEric]

Thank you @ai & @jebeck @erikig & everyone who contributed. I solved the issue by installing npm i postcss. My CRA is not ejected and whenever I build the app npm run build, It works expectedly. Thanks for collaboration to fix the bugs.

[jebeck]

I just did a fresh new CRA again, and it appears everything has been fixed upstream? I didn't have to modify the output at all; no install of postcss or anything. Maybe I'll wait a bit for additional confirmation, but otherwise feels like I can close this issue. Echoing @NiyongaboEric, thank you all for helping to get this resolved so quickly! 🎉

[giulianok]

I removed node_modules and package-lock.json, installed all the deps again, only postcss got updated from 7.0.33 to 7.0.34, and the build started working again.

[jebeck]

Closing! Sounds like even if you created a CRA during the time things were broken, just delete node_modules and package-lock and reinstall to get the fixed version of postcss (as @giulianok says above!).

[tpmccallum]

I tried yarn followed by yarn run build and it worked; see https://github.com/Uniswap/uniswap-interface/issues/1109