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

[hydroperx]

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.

• Project: webpackbug.zip
  • To run: npm i && npm run dev
• Webpack wrapper CLI: https://github.com/hydroperx/webpack
• Webpack configuration

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]

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]

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]

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

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]

@hydroperx Do you still have a problem with webpack?

[hydroperx]

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

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

[hydroperx]

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

[alexander-akait]

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

[alexander-akait]

@hydroperx I moved this to the discussion, but I will be glad to help in any case, at the moment the library in the ES modules format does not comply with the mandatory requirements for extensions, when you fix it and if you will have the same problem, ping me here, but mostly you have two versions of react, any context issue mostly related to the such problem.

We don't make magic here and a lot of developers use webpack and react without such problem, so I assume that the problem is somewhere with dependencies, that is why you have two version of react.