FG
🌐 Web & Full-StackVercel

Invalid hook call in 9.0.6

Freshabout 19 hours ago
Mar 14, 20260 views
Confidence Score95%
95%

Problem

Bug report Describe the bug When you use react a component residing outside the main Next.js project folder which uses hooks. You end up getting `Invalid hook call` error and the application breaks. Components without hooks work as expected. The bug appears in all versions `>9.0.5` when you change the webpack config so that files outside the main folder are transpiled. It’s working fine in `<=9.0.5` To Reproduce Check out the repro at https://github.com/baldurh/next-9.0.6-bug-repro Expected behavior The code should not break when using files outside the project folder. System information - OS: N/A - Browser: N/A - Version of Next.js: `>=9.0.6` Additional context I know this is probably not a common use of Next.js but in our project we’re using a monorepo and have a shared folder with components used by multiple applications. It would be nice to get this working again. If someone finds an alternative config we could use I’d also be happy to do that 🙂

Error Output

error and the application breaks. Components without hooks work as expected.

Unverified for your environment

Select your OS to check compatibility.

1 Fix

Canonical Fix
Unverified Fix
New Fix – Awaiting Verification

Fix Invalid Hook Call in Next.js 9.0.6+ with External Components

Medium Risk

The 'Invalid hook call' error occurs because React hooks rely on the React instance being consistent across the application. When components are transpiled from outside the main Next.js project folder, they may reference a different instance of React than the one used by the main application, leading to this error. This issue is exacerbated in versions of Next.js greater than 9.0.5 due to changes in how Webpack handles module resolution.

Awaiting Verification

Be the first to verify this fix

  1. 1

    Ensure Single React Instance

    Make sure that both your main Next.js project and the external components are using the same instance of React. This can be achieved by adding a 'peerDependency' for React in your external component package.

    bash
    npm install react --save-peer
  2. 2

    Update Webpack Configuration

    Modify your Next.js Webpack configuration to ensure that it resolves the React module from the main project rather than the external component. This can be done by adding an alias in the Webpack config.

    javascript
    const path = require('path');
module.exports = {
  webpack: (config) => {
    config.resolve.alias['react'] = path.resolve(__dirname, 'node_modules/react');
    return config;
  }
};
  3. 3

    Transpile External Components

    Ensure that your external components are being transpiled correctly. You can use Babel to transpile your shared components. Create a '.babelrc' file in your shared folder with the necessary presets.

    json
    {
  "presets": ["next/babel"]
}
  4. 4

    Check for Duplicate React Instances

    Run the command 'npm ls react' in both your main project and the external component folder to check for multiple versions of React. Ensure that both point to the same version.

    bash
    npm ls react
  5. 5

    Test Application

    After making the above changes, restart your Next.js application and test the components that were previously causing the 'Invalid hook call' error to ensure they are functioning correctly.

    bash
    npm run dev

Validation

Confirm that the application runs without the 'Invalid hook call' error and that all components, including those from the external folder, function as expected. You can also check the console for any warnings related to React hooks.

Sign in to verify this fix

Environment

Submitted by

AC

Alex Chen

2450 rep

Tags

nextjsreactssrwebpack