Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TypeError: Cannot read property 'forEach' of undefined if object destructing with rest props is used #7753

Closed
paveltiunov opened this issue Sep 29, 2019 · 41 comments · Fixed by #7754

Comments

@paveltiunov
Copy link

paveltiunov commented Sep 29, 2019

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

This comment has been minimized.

@smogili1
Copy link

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
Copy link

iMerica commented Sep 30, 2019

Downgrading React Scripts to 3.0.1 worked for me.

@alaindimabuyo
Copy link

@iMerica downgrading also worked for me

@rodgomesc
Copy link

rodgomesc commented Sep 30, 2019

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
Copy link

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

@rodgomesc
Copy link

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

@amayatsky
Copy link

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

@Gr8z
Copy link

Gr8z commented Sep 30, 2019

npm i [email protected]

Downgrade to 3.0.1

@mattisdada
Copy link

+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
Copy link

I had the same issue, also downgraded to 3.0.1

@ncolliva
Copy link

downgrading to version 3.0.1 seems to solve the problem!

@oyof8376
Copy link

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
Copy link

targos commented Sep 30, 2019

ESLint bug: eslint/eslint#12335

@AbhaysinghBhosale
Copy link

AbhaysinghBhosale commented Sep 30, 2019

+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

This comment has been minimized.

@paul-vd

This comment has been minimized.

@Bhargav-Narayan

This comment has been minimized.

@adelsagemilang

This comment has been minimized.

@alexeysmorkalov
Copy link

alexeysmorkalov commented Sep 30, 2019

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
Copy link

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

@Bhargav-Narayan
Copy link

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

This comment has been minimized.

@chrisbull
Copy link

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
Copy link

"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
Copy link

mattcosta7 commented Sep 30, 2019

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

@ianschmitz ianschmitz pinned this issue Sep 30, 2019
@avindra
Copy link

avindra commented Sep 30, 2019

This seems similar to #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
Copy link

bmueller-sykes commented Sep 30, 2019

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
Copy link

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
Copy link

iMerica commented Sep 30, 2019

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
Copy link

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

rustyb added a commit to rustyb/tasking-manager that referenced this issue Sep 30, 2019
rjwats added a commit to rjwats/esp8266-react that referenced this issue Sep 30, 2019
upgrade react dependencies - except react-scripts which currently has an issue with eslint
facebook/create-react-app#7753
@ahrbil
Copy link

ahrbil commented Sep 30, 2019

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
Copy link

naeohmi commented Sep 30, 2019

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
Copy link

avindra commented Sep 30, 2019

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

@richardhertzog
Copy link

richardhertzog commented Sep 30, 2019

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.

studioromeo added a commit to studioromeo/hacktoberfest-checker that referenced this issue Sep 30, 2019
./src/components/PageWrapper.js
TypeError: Cannot read property 'forEach' of undefined

was being thrown during build. According to a github issue downgrading is the solution

facebook/create-react-app#7753
@gurpreetsingh2410
Copy link

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
Copy link

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.

jenkoian pushed a commit to jenkoian/hacktoberfest-checker that referenced this issue Sep 30, 2019
* Fix react-scripts build error

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

was being thrown during build. According to a github issue downgrading is the solution

facebook/create-react-app#7753

* Fix issue text colours

* Fixed npm typo

* Unignored package-lock.json
jenkoian added a commit to jenkoian/hacktoberfest-checker that referenced this issue Sep 30, 2019
* Update for 2019

* Add grace period support.

This year there is a 1 week grace period before a PR counts, this commit
adds support for this by displaying 'pending' next to any that are
less than a week old.

* Add thanks yo digital ocean and dev to

* Minor fixes to 2019 update (#359)

* Fix react-scripts build error

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

was being thrown during build. According to a github issue downgrading is the solution

facebook/create-react-app#7753

* Fix issue text colours

* Fixed npm typo

* Unignored package-lock.json
@ianschmitz
Copy link
Contributor

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 #7754 that would be greatly appreciated. We'll post back here when we have a fix ready to go out.

@facebook facebook locked and limited conversation to collaborators Sep 30, 2019
@ianschmitz
Copy link
Contributor

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

@iansu iansu unpinned this issue Oct 16, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging a pull request may close this issue.