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

Compilation error when hook called specifically after a for - of loop that contains an if - else statement #8953

Closed
tory37 opened this issue May 4, 2020 · 2 comments · May be fixed by admmasters/create-react-app#34 or joseroubert08/create-react-app#55

Comments

@tory37
Copy link

tory37 commented May 4, 2020

Describe the bug

Compilation error when calling a hook specifically after a for - of loop that contains an if - else block
Error: React Hook "useEffect" is called conditionally. React Hooks must be called in the exact same order in every component render. Did you accidentally call a React Hook after an early return?

Did you try recovering your dependencies?

Npm version: 6.13.4

Environment

Environment Info:

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

System:
OS: macOS 10.15.2
CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
Binaries:
Node: 12.14.1 - ~/.nvm/versions/node/v12.14.1/bin/node
Yarn: Not Found
npm: 6.13.4 - ~/.nvm/versions/node/v12.14.1/bin/npm
Browsers:
Chrome: 81.0.4044.129
Firefox: Not Found
Safari: 13.0.4
npmPackages:
react: ^16.13.1 => 16.13.1
react-dom: ^16.13.1 => 16.13.1
react-scripts: 3.4.1 => 3.4.1
npmGlobalPackages:
create-react-app: Not Found

Steps to reproduce

  1. Use create react app to create a new app
  2. Create a new hook or functional component
  3. inside hook or component, Write a for - of loop that contains an if else statement. The if else can be empty
  4. write any useEffect after the for loop
  5. run npm start, and notice a compilation error
  • React Hook "useEffect" is called conditionally. React Hooks must be called in the exact same order in every component render. Did you accidentally call a React Hook after an early return?
  1. Remove for loop, or if else inside for loop, or move if outside of for loop, and see the errors dissappear

Expected behavior

No compilation error

Actual behavior

Compilation Error: - React Hook "useEffect" is called conditionally. React Hooks must be called in the exact same order in every component render. Did you accidentally call a React Hook after an early return? Can be seen by running npm start in provided demo

Reproducible demo

https://github.com/tory37/create-react-app-compilation-error

Example bugged code is in App.js

@stale
Copy link

stale bot commented Jun 3, 2020

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

@stale stale bot added the stale label Jun 3, 2020
@stale
Copy link

stale bot commented Jun 9, 2020

This issue has been automatically closed because it has not had any recent activity. If you have a question or comment, please open a new issue.

@stale stale bot closed this as completed Jun 9, 2020
@lock lock bot locked and limited conversation to collaborators Jun 24, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
1 participant