question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

React node_modules Installation Location Causes Invalid Hook Call

See original GitHub issue

Bug report

Describe the bug

First bug report so patience appreciated. Following an installation of @material-ui/core receive “Invalid hook call”. Traced the issue back to any hook in general and react installation location.

To Reproduce

Created simple standard folder structure: src |–components |–pages |–package.json |–next.config.js |–etc. etc. public |–placeholder.html |–404.html functions |–index.js |–package.json

Functions package.json is identical with additional firebase-admin and firebase-functions

Once you add @material-ui/core and make a simple button get:

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same app See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.

Changing the button to simple <button onClick={...}>Click Me</button> works.

On deploy, the following error:

Error occurred prerendering page "/" https://err.sh/zeit/next.js/prerender-error: Error: Minified React error #321

Expected behavior

Easy implementation of @material-ui

Screenshots

If applicable, add screenshots to help explain your problem.

System information

linux ubuntu

Additional context

This is not a duplicate of #7626

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:2
  • Comments:8 (2 by maintainers)

github_iconTop GitHub Comments

7reactions
samstrcommented, Feb 28, 2020

Did you ever find a fix for this? I have the same issue

0reactions
balazsorban44commented, Jan 29, 2022

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Invalid hook call on npm-link library - node.js - Stack Overflow
This could happen for one of the following reasons: You might have mismatching versions of React and the renderer (such as React DOM)...
Read more >
React node_modules Installation Location Causes Invalid ...
Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the...
Read more >
Invalid Hook Call Warning - React
There are three common reasons you might be seeing it: You might have mismatching versions of React and React DOM. You might be...
Read more >
Invalid hook call - How to resolve multiple versions of React ...
I noticed that whenever I link each individually, the former unlinks. So by doing npm link ./path-to-app/node_modules/react ./path-to-app/ ...
Read more >
Solving React Hooks' invalid hook call warning - Rob Kendal
Building a React project and have the error 'Hooks can only be called inside the body of a function component'? We'll solve the...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found