Skip to content

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

Invalid hook call in React only when using Webpack rather than the Vite bundler #19471

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
hydroperx opened this issue Apr 26, 2025 · 9 comments
Closed

Comments

@hydroperx
Copy link

hydroperx commented Apr 26, 2025

Bug report

What is the current behavior?

When serving my Webpack + TypeScript + React project I'm getting:

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
  (reported line: Container.tsx:17)

Uncaught TypeError: Cannot read properties of null (reading 'useContext')
    at push.../node_modules/react/cjs/react.development.js.exports.useContext (react.development.js:1168:1)
    at Container (Container.tsx:17:29)

If the current behavior is a bug, please provide the steps to reproduce.

The error indicates that I am using React wrongly, but I confirmed I am using component top-level hooks only and the React and react-dom packages are not duplicating.

Full information here on why I'm doing it right.

  • To update, I am satisfied with using Vite as I figured out how to handle browser support differently in @hydroperx/fluent.

My only workaround is to simply use Vite instead of Webpack.

What is the expected behavior?

Display a webpage with user interface elements such as a heading title "Metro demo", and several other components such as context menu, buttons, icons, live tiles and others, with no console or page error.

Other relevant information:
webpack version: 5.99.6
Node.js version: 22.14.0
Operating System: Windows 11
Additional tools: N/A

@hydroperx
Copy link
Author

Note that for some reason, after I migrated my @hydroperx/metro package from using main to exports in the NPM manifest, Webpack simply doesn't take the exports of the package, so we're getting a different error now, but the above React error insisted until then.

@alexander-akait
Copy link
Member

alexander-akait commented Apr 28, 2025

There is no problem here who is better - vite or webpack, there is a problem with your library, webpack is simply stricter here, as it allows you to catch problems at the bundling stage, while white is less demanding, but this does not eliminate the problem that other tools and other assemblers will not work with your library in the same way, the behavior of webpack completely follows the Node.js/deno/bug behavior.

What's the problem?

You *can't using import and reexport without extensions, this is literally mandatory to use for ES modules.

https://nodejs.org/api/esm.html#import-specifiers

Relative specifiers like './startup.js' or '../config.mjs'. They refer to a path relative to the location of the importing file. The file extension is always necessary for these.

https://docs.deno.com/runtime/fundamentals/modules/

With ECMAScript modules, local import specifiers must always include the full file extension. It cannot be omitted.

Using your library can be broken for other developers.

You have "type": "module", it means your library is fully compatibility with ES modules.

@hydroperx
Copy link
Author

@alexander-akait I've deleted the SO question, but here's the Reddit post detailing everything: https://www.reddit.com/r/learnjavascript/comments/1k4neum/invalid_hook_call_in_react_using_webpack/

@alexander-akait
Copy link
Member

I recommend do not study how import/export works from how vite/webpack/ets handle, they can be less strict in some areas and use official documentation to understand the work - MDN, Node.js, tc39 official proposals.

@alexander-akait
Copy link
Member

@hydroperx Do you still have a problem with webpack?

@hydroperx
Copy link
Author

@alexander-akait Right now, it'd be first this "new" exports issue that you've responded to, and then this misleading React hook error as I've given full information in the above Reddit post.

@hydroperx
Copy link
Author

I've to give it a try to fix that exports issue, but I'd have to update my react library for that :/

@hydroperx
Copy link
Author

When I said exports I refer to the exports field in package.json, not the export statement. @alexander-akait

@alexander-akait
Copy link
Member

I've to give it a try to fix that exports issue, but I'd have to update my react library for that :/

I don't think you need to do it

Uncaught TypeError: Cannot read properties of null (reading 'useContext')

It means you have two different copies of react, check your dependencies, maybe you can accidentally install another version somewhere

We respect the exports field in package.json, and respect was added a long time ago

@webpack webpack locked and limited conversation to collaborators Apr 28, 2025
@alexander-akait alexander-akait converted this issue into discussion #19474 Apr 28, 2025

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants