Next.js: 'Error: Invalid hook call. Hooks can only be called inside of the body of a function component'

[olalekanteeblaze]

Bug report

Describe the bug

I keep 'Error: Invalid hook call. Hooks can only be called inside of the body of a function component' after starting the next development server. This is the default next app with no configuration from me at all

To Reproduce

1. Start a new next app with npx create-next-app moshood.dev
2. Start the next development server with yarn dev
3. Navigate to localhost:3000 in the browser after starting development server
4. Browser shows 'internal server Error' and terminal shows 'Error: Invalid hook call. Hooks can only be called inside of the body of a function component'

Expected behavior

Start default next app in the browser successfully.

Screenshots

System information

• OS: [Windows]
• Browser [chrome]
• Version of Next.js: [9.5.3]
• Version of Node.js: [e.g. 12.18.2]
• Version of React [16.13.1]
  -Version of React-dom [16.13.1]

[timneutkens]

Start a new next app with npx create-next-app moshood.dev
Start the next development server with yarn dev
Navigate to localhost:3000 in the browser after starting development server

These are the steps that set up a completely new Next.js application. Please provide a complete reproduction instead.

[mohesem]

same error here

[olalekanteeblaze]

Maybe I didn't explain this well. This error is exactly what I get immediately I navigate to localhost:3000 after starting a new Next.js application. The reproduction process is just starting a new Next.js App. Might be peculiar to me though

[iliasbhal]

We experience the same issue as soon as we use the ^9.5 version. We had to downgrade to a 9.4(ish) version.
We were relying on a feature only available on 9.5 😢

it is strange because when developing locally, everything is working fine.
But it's only when we deployed the app to our servers that we see the error. ( build and running locally works fine )

[einaralex]

@iliasbhal Are you symlinking your node_modules in the deployment?
We were having the exact problem and skipping the symlink worked.
See more here: https://github.com/vercel/next.js/issues/16988

[nickpassarella]

I'm getting this same issue on an existing project. I didn't make any major changes aside from an npm install so I don't understand it. I only have the issue when running next dev. next build && next start works without any issues.

I did a little debugging, and it looks like something is setting ReactCurrentDispatcher.current to null. It is initially defined, but eventually is set to null and triggers the invariant hook warning when useContext is called in the Document Html component.
EDIT: I read the error incorrectly. It looks like ReactCurrentDispatcher is null when Html calls useContext, throwing the error. My console log shows it as defined three more times before it is null again when the error page is loading.

I'm fairly new to Next, so I'm not sure if this is an issue with Next or React.

Any chance this is related to https://github.com/facebook/react/issues/14022?

[nickpassarella]

It looks like my issue is unrelated to @olalekanteeblaze's. I had a mistake in my next.config.js that I think was writing over next webpack externals. Perhaps this was affecting react versions under the hood?

[StEvUgnIn]

Same problem since three days, after succesful build. Here the log: https://gist.github.com/StEvUgnIn/c74757a9efc9a3dbba6fb3c094f39bb0