npm run dev fails, throws Invalid hook call, results in Internal server error 500

[badfun]

Bug report

Describe the bug

npm run dev ("next dev") after a clean install (npx create-next-app) fails to launch the server. First, it announces "ready on http://localhost:3000", then after a second it throws a pile of warnings ("There are multiple modules with names that only differ in casing") but ends with the "ready on http://localhost:3000" message again. When trying to access the url, it throws the warnings again, then crashes with an "Invalid hook call" error.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. npx create-next-app clean-test
2. cd clean-test
3. 'npm run dev' or 'npx next dev'

Expected behavior

I expect to see the server running on localhost 3000, as per step 2 of the installation procedure.

Screenshots

info  - ready on http://localhost:3000
Error: 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://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
    at resolveDispatcher (C:\Users\Ken\cloud\dev\nextjs\clean-test\.next\server\pages\_document.js:3364:13)
    at useContext (C:\Users\Ken\cloud\dev\nextjs\clean-test\.next\server\pages\_document.js:3372:20)
    at Html (C:\Users\Ken\cloud\dev\nextjs\clean-test\.next\server\pages\_document.js:324:29)
    at processChild (C:\Users\Ken\Cloud\DEV\nextjs\clean-test\node_modules\react-dom\cjs\react-dom-server.node.development.js:3353:14)
    at resolve (C:\Users\Ken\Cloud\DEV\nextjs\clean-test\node_modules\react-dom\cjs\react-dom-server.node.development.js:3270:5)
    at ReactDOMServerRenderer.render (C:\Users\Ken\Cloud\DEV\nextjs\clean-test\node_modules\react-dom\cjs\react-dom-server.node.development.js:3753:22)
    at ReactDOMServerRenderer.read (C:\Users\Ken\Cloud\DEV\nextjs\clean-test\node_modules\react-dom\cjs\react-dom-server.node.development.js:3690:29)
    at renderToStaticMarkup (C:\Users\Ken\Cloud\DEV\nextjs\clean-test\node_modules\react-dom\cjs\react-dom-server.node.development.js:4314:27)
    at renderDocument (C:\Users\Ken\Cloud\DEV\nextjs\clean-test\node_modules\next\dist\next-server\server\render.js:3:669)
    at renderToHTML (C:\Users\Ken\Cloud\DEV\nextjs\clean-test\node_modules\next\dist\next-server\server\render.js:55:103)

System information

• OS: Windows 10 Pro
• Browser: all browsers
• Version of Next.js: 10.0.3
• Version of Node.js: 14.15.0
• Deployment: localhost

  Additional context

Add any other context about the problem here. fails using gitbash, or terminal in VSCode

    "next": "10.0.3",
    "react": "17.0.1",
    "react-dom": "17.0.1"

[badfun]

I've gone back to an older project and it runs fine:

    "next": "9.3.5",
    "react": "16.13.1",
    "react-dom": "16.13.1"

[badfun]

Confirmed: changing to 9.3.5 works, even leaving latest versions of react intact:

    "next": "^9.3.5",
    "react": "17.0.1",
    "react-dom": "17.0.1"

Judging by this issue, it seems to be a problem some of us are facing with later versions: https://github.com/vercel/next.js/issues/16535#issuecomment-679950934

[timneutkens]

Can't reproduce this based on the provided steps. Please provide a repository where it consistently reproduces so that we can have a look, thanks!

[badfun]

https://github.com/badfun/nextjs-clean-test

[badfun]

Also created a branch using 9.3.5.

https://github.com/badfun/nextjs-clean-test/tree/using-next9.3.5

[timneutkens]

Still can't reproduce when using the repository 🤔

[badfun]

Yeah, that's not surprising. It's a clean install, so the repo is just a 'npx create-next-app' and then uploaded. No changes made on my part whatsoever.

Whatever the conflict is, I've just confirmed that this strange workaround gets past it: https://github.com/vercel/next.js/issues/16535#issuecomment-738857277

For now I'll just employ that strategy. thanks.

[timneutkens]

Can you check if you have some dependency directory (e.g. node_modules or globally installed through npm) version of next.js, react / react-dom, or other deps?

[badfun]

No I don't. I recently cleaned up all my global packages so only have these:

+-- @aws-amplify/cli@4.38.0 +-- aws-cdk@1.71.0 +-- lumigo-cli@0.47.0 -- typescript@4.0.5

I spent some time on it this morning, and I can confirm that the error still persists using Git bash and the terminal in VSCode. Both use Git for Windows. However, I went through the install process using Console Window Host (Windows\System32\conhost.exe) and it works fine. So my best guess is there is some conflict with Git for Windows, which the VSCode hack mentioned here https://github.com/vercel/next.js/issues/16535#issuecomment-738857277 seems to solve. I suspect it has to do with path naming in Windows.

Anyway, I think enough time has been spent digging into this. Thanks for your help Tim. At least there is a work-around, and I'm pretty certain it's not a bug with nextjs after all. Thanks!

[balazsorban44]

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.