Next.js: React node_modules Installation Location Causes Invalid Hook Call

[clive-h-townsend]

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

[clive-h-townsend]

Repository: https://github.com/clive-h-townsend/nextjs-test/tree/Meagher-County-Chronicle-Start/

[clive-h-townsend]

Update: This appears to be similar to #9022

Moved react and react-dom to top level directory. Now npm run serve works on localhost:5000 and npm run dev works on localhost:3000 perfectly.

However, on npm run deploy everything works until the Node.js 8 function update. Firebase complains with:

⚠  functions[next(us-central1)]: Deployment error.
Function failed on loading user code. Error message: Code in file index.js can't be loaded.
Did you list all required modules in the package.json dependencies?
Detailed stack trace: Error: Cannot find module 'react'

Tried re-installing react in src/app directory as well as the suggestion from: https://github.com/facebook/react/issues/15315#issuecomment-479802153

to no avail.

[samstr]

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

[alvinthen]

There's a relevant issue with the Firebase Hosting + Typescript example here
https://github.com/zeit/next.js/tree/canary/examples/with-firebase-hosting-and-typescript

It works fine until you run one deployment, which created a node_modules folder inside the dist/ folder. Now on next next dev, you'll start getting invalid hooks call.

The only workaround is to clean up the dist folder after every deployment.

[clive-h-townsend]

I did end up finding a (really annoying) work around. Basically you need to move the installation locations of your trouble modules back and forth between local testing and deployments... A bit backed up right now but I can write up a more detailed explanation if there is an audience... Didn't hear a word back from zeit/next so I moved on with other options to be honest.

[ryan-0]

This is also happening to me... as @alvinthen said, my temporary fix for now was just to add npm run clean to the dev and preserve script in package.json

[Timer]

Duplicate of #9022