'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: #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 facebook/react#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

[StEvUgnIn]

This error was due to special characters (.) in the repository name. Change it to www and it should build successfully. If so, I invite to correct this mistake and close this issue.

[InsOpDe]

#16369 fixed it for me.
Ive upgraded to next@10.0.4 and react@17.0.1 and now it works

[valentinoPereira]

It's funny.. I get this error only when I run my nextjs project in https://github.com/Eugeny/terminus command line using powershell profile.

However when I run my project in normal windows powershell, I don't get this error.

[stereobooster]

This is what solved problem for me.

In next.config.js:

/** @type {import('next').NextConfig} */
module.exports = {
  webpack: (config, options) => {

    config.resolve.alias = {
      ...config.resolve.alias,
      react: require.resolve('react').replace('index.js', ''),
    };

    return config;
  },
};

Explanation: most likely Webpack/npm have issues correctly resolving React package, as the result there is more than one copy of React in the application. This will force webpack use the same copy of React everywhere.

[ijjk]

Hi, this appears to be a duplicate of #16535 so I'm gonna close this in favor of that one for tracking this.

[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.