Fixing duplicate import of preact with react-router — Cannot read properties of undefined (reading '__H')

[itsgiacoliketaco]

If you're using preact with react-router and running tests with Vitest, you may experience the following error when running tests:

TypeError: Cannot read properties of undefined (reading '__H')

The error comes from somewhere in the preact/hooks package.

The error arises because both the CJS and ESM versions of the preact and preact/hooks packages are being loaded (more info here). In my case, my code is ESM (type: module), so it loads the ESM version of preact. But Vite loads the CJS version of react-router, which tries to require (not import) React, which loads the CJS version of preact. This happens despite explicitly aliasing "react" to the CJS (or ESM) version of preact—I think because Vitest does not alias require, only import. I think this also explains why this setup works in Vite (dev server + production build) with no issues, but not in Vitest.

This is an example of the dual-package hazard.

The solution: add resolve.mainFields = ["module"] to your Vite config. Here's a snippet that does this only when running in test mode.

export default defineConfig((env) => ({
  resolve: {
    // Fix duplicate preact package caused by react-router import.
    mainFields: env.mode === "test" ? ["module"] : undefined,
  }
}));

This appears to force Vitest to load the ESM version of react-router, which then imports preact correctly. Something in react-router's package.json prevents Vite/Vitest from doing this by default.

Full credit to @hi-ogawa for this solution! It took me a while to stumble across that issue, so I'm writing this discussion post hoping it will include the right keywords, and people searching will be directed here immediately. Then perhaps the many hours it took me to resolve this will have been worth it 😝

Related issues to try other possible solutions:

• Using urql's useMutation hook inside tests yields "TypeError: Cannot read properties of undefined (reading '__H')" error possibly because of currentComponent in getHookState is undefined preactjs/preact#3468
• [Preact] [SWR] TypeError: Cannot read properties of undefined (reading '__H') #5915
• Using urql's useMutation hook inside tests yields "TypeError: Cannot read properties of undefined (reading '__H')" error possibly because of currentComponent in getHookState is undefined preactjs/preact#3468

P.S. Still super grateful for Vite + Vitest!