Create-react-app: TypeError: Cannot read property 'forEach' of undefined if object destructing with rest props is used

[paveltiunov]

Describe the bug

Compilation fails with TypeError: Cannot read property 'forEach' of undefined if object destructing with rest props is used in npx created app.
Works with yarn though.

__Versions of react-scripts affected__: 3.1.0, 3.1.1 (with different error messages), 3.1.2
__Most recent react-scripts version that works__: 3.0.1

Did you try recovering your dependencies?

npm --version: 6.11.3

Which terms did you search for in User Guide?

TypeError: Cannot read property 'forEach' of undefined

Environment

$ npx create-react-app --info

Environment Info:

  System:
    OS: macOS 10.14
    CPU: (8) x64 Intel(R) Core(TM) i7-3615QM CPU @ 2.30GHz
  Binaries:
    Node: 12.11.0 - ~/.nvm/versions/node/v12.11.0/bin/node
    Yarn: Not Found
    npm: 6.11.3 - ~/.nvm/versions/node/v12.11.0/bin/npm
  Browsers:
    Chrome: 77.0.3865.90
    Firefox: 67.0
    Safari: 12.0
  npmPackages:
    react: ^16.10.1 => 16.10.1 
    react-dom: ^16.10.1 => 16.10.1 
    react-scripts: 3.1.2 => 3.1.2 
  npmGlobalPackages:
    create-react-app: Not Found

(paste the output of the command here.)

Steps to reproduce

(Write your steps here:)

1. Create new app using npx: $ npx create-react-app error-test. Make sure yarn is not installed.
2. Go to error-test/src/App.js and add following code to the end of the file:

const testCase = {
  restObjectPropsFails: ({ id, ...item }) => {
    return null;
  }
}

1. Run $ npm start from error-test directory

Expected behavior

Application is compiled correctly

Actual behavior

Compilation failed with message:

Failed to compile.

./src/App.js
TypeError: Cannot read property 'forEach' of undefined

Reproducible demo

(Paste the link to an example project and exact instructions to reproduce the issue.)

[gurpreetsingh2410]

+1

[smogili1]

Ran into the same issue and spent half a day debugging. Saw this issue and switched to a prior version and it seems to work like a charm.

[iMerica]

Downgrading React Scripts to 3.0.1 worked for me.

[alaindimabuyo]

@iMerica downgrading also worked for me

[rodgomesc]

Downgrading React Scripts to 3.0.1 worked for me.

i was working on a project for one week, with react-scripts version 3.0.1 with no errors, and today when i start my project i got this related error, what is the explanation for this? react-scripts connect to a external server when i run yarn start ???? this is insane

PS: downgrading to version 3.0.1 solved the problem

[smogili1]

you must have done yarn install which would have upgraded based on your package.json settings.

[rodgomesc]

No, in all commits, version of react Scripts never change, i Just checkout a old commits to check

[amayatsky]

3.1.1 is working fine for me while 3.1.2 doesn't.

[Gr8z]

npm i [email protected]

Downgrade to 3.0.1

[mattisdada]

+1 I also had to downgrade to 3.0.1.

3.1.2 & 3.1.1 (I didn't try 3.1.0) both failed....

[janprasil]

I had the same issue, also downgraded to 3.0.1

[ncolliva]

downgrading to version 3.0.1 seems to solve the problem!

[oyof8376]

I had the same problem but found that reverting eslint to 6.4.0 from the simultaneous update to 6.5.0 solved the problem. Tried to npm i [email protected] again and got same compile error.
So working with:
"eslint": "^6.4.0",
"react": "^16.10.1",
"react-dom": "^16.10.1",
"react-router-dom": "^5.1.1",
"react-scripts": "^3.1.2",

[targos]

ESLint bug: https://github.com/eslint/eslint/issues/12335

[AbhaysinghBhosale]

+1 getting same issue. Same code was working on Friday. Its caused after npm install and updated packages version. You can downgrade react-script version to 3.0.1 to fix this. But looks like issue is in eslint.

[jembach]

+1 getting same issue

[PaulPCIO]

+1 same issue

[Bhargav-Narayan]

+1 Same issue

[adelsagemilang]

+1 Same issue downgrading react-scripts doesn't work for me

[alexeysmorkalov]

Had the same issue.
Resolved by:

• downgraded react-scripts to 3.0.1
• removed eslint from devDependencies
• removed package-lock.json, deleted node_modules and run "npm install"

[joaopedroft]

+1 Same issue, downgrading react-scripts to 3.0.1 mitigates the problem.

[Bhargav-Narayan]

In my case, After downgrading to 3.0.1, I was getting Error: Cannot find module '@csstools/normalize.css. So I uninstalled @csstools/normalize.css and reinstalled @csstools/normalize.css and it worked.

[vietthanhbk1994]

My solution is disable eslint of react-script by customize-cra react-app-rewired. Detail in stackoverflow-cannot-read-property-foreach-of-undefined-in-react

[alexandrtovmach]

This PR #7754 should fix this error

[knilink]

yarn works because the lock file
after rm -r node_modules yarn.lock; yarn install, the error can be reproduced.

[chrisbull]

The issue is definitely eslint-loader. Thanks @alexandrtovmach

Until that merge gets included, adding the following to package.json worked for me

"resolutions": {
    "eslint-loader": "3.0.2"
  }

[noahfinkso]

"eslint": "^6.4.0",
"react": "^16.10.1",
"react-dom": "^16.10.1",
"react-router-dom": "^5.1.1",

Worked for me on my ejected project. Thanks @oyof8376

[mattcosta7]

locking eslint at 6.4.0 in devDependencies fixes this on my end (at least until the pr referecned above is released). 6.5.0 fails

[avindra]

This seems similar to https://github.com/facebook/create-react-app/issues/7566 where yarn users had to override babel-eslint to 10.0.3 .

Can anyone think of a way we can test for this problems? Maybe have the linter portion run in the builds for create-react-app to ensure downstream consumers don't get broken.

[bmueller-sykes]

Ugh. Everything was working on Friday, then I upgraded to react 16.10.1 this morning, and was able to work on the dev server just fine for a few hours. Then I tried to do a build of my project, where I first deleted and re-installed all my dependencies, then did the standard npm run build. At that point, I started getting these kinds of errors:
TypeError: Cannot read property 'forEach' of undefined

So I reverted back to my package.json file from this past Friday (react 16.9.0, react-script 3.1.2), blew away my node_modules folder, reinstalled all my dependencies, and I'm still getting the same error. Yuck!

FWIW, I don't explicitly have eslint as one of my dependencies. I'm not sure what to make of that, but I'm dead in the water at the moment.

[bmueller-sykes]

So yeah, now I've rolled all the way back to react-script 3.0.1, and things are up and running again. But I have no idea why things ever worked with any version beyond 3.0.1. is there some sort of global install that's happening under the hood here?

[iMerica]

Yes, it is a bug with eslint-loader, but it is a design flaw in CRA to give a linter enough importance that it can break core development functionality.

[bmueller-sykes]

@iMerica Ah, I see that above now. Is this because create-react-app 3.1.2 does this:

"eslint": "^6.1.0",

...and so it's grabbing whatever the newest version of eslint is, which has a bug in it?

FWIW, I've removed all of those ^ and other commands in my package.json file, almost entirely to prevent rogue updates that might break something. My routine is that first thing every day, I run npm outdated to see what's old, and then I update that stuff manually.

[ahrbil]

I have the same issue and I just spent the whole day debugging it.
downgrading to react-scripts: 3.0.1 worked for me.

[naeohmi]

We're having this same issue, same error message, and it's breaking the whole build 😲!
Tried downgrading to react-scripts: 3.0.1 but that's not quite working yet...

[avindra]

Do npm users have a way to control dependency resolutions yet? As mentioned earlier in this thread, there is a working solution for yarn users: https://github.com/facebook/create-react-app/issues/7753#issuecomment-536560532 without having to completely downgrade react-scripts

[richardhertzog]

node 10.16.3 react 16.9.0 react-scripts 3.0.1 eslint 6.1.0 babel/core 7.6.2
Is working for me using npm with no resolutions.

[gurpreetsingh2410]

Do npm users have a way to control dependency resolutions yet? As mentioned earlier in this thread, there is a working solution for yarn users: #7753 (comment) without having to completely downgrade react-scripts

I am also using npm. I resolved quickly it by deleting package.json, removing node modules directory and package-lock.json and installing back again.

[babalugats76]

Ouch! I lost a whole day to this, having to methodically run npm outdated and upgrade packages one by one to find the culprit. I can confirm, however, that updating package.json to 3.0.1 and rolling back allowed my application to compile and nixed the forEach issue. My application is based on npm and create-react-app.

[ianschmitz]

Going to lock this for now to prevent email spam to those subscribed. If anyone could spare some time to try to sort out the CI error in the Linux runs over at https://github.com/facebook/create-react-app/pull/7754 that would be greatly appreciated. We'll post back here when we have a fix ready to go out.

[ianschmitz]

We've got a fix in and should be releasing in the next few hours hopefully. Thanks for your patience!