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

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

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

next error scrnli_10_3_2020_6-29-40 PM

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]

About this issue

Original URL
State: closed
Created 4 years ago
Comments: 15 (3 by maintainers)

Commits related to this issue

Fix invalid project dir casing breaking Next.js on Windows (#29205) This fixes Next.js running into unexpected errors on Windows when invalid casing for a project directory is used. I was able to rep... — committed to vercel/next.js by ijjk 3 years ago
Fix invalid project dir casing breaking Next.js on Windows (#29205) This fixes Next.js running into unexpected errors on Windows when invalid casing for a project directory is used. I was able to rep... — committed to natew/next.js by ijjk 3 years ago

Most upvoted comments

same error here

+13

mohesem on Oct 5, 2020

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?

nickpassarella on Oct 19, 2020

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.

stereobooster on Sep 15, 2021

@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

einaralex on Oct 11, 2020