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

[EmreErdogan]

Describe the bug
I'm getting TypeError: Cannot read properties of undefined (reading '__H') error on test environment when rendering a component which uses urql's useMutation hook. The component renders without a problem on browser.

Project structure
@preact/preset-vite + @urql/preact + vitest + @testing-library/preact

About the hook

Link to source code of useMutation.

Please see the source code of the hook, it looks fine imho. I don't see any problem with its implementation.

As far as I could debug the problem and dug into the source code of Preact hooks, I saw that this line yields the error.

preact/hooks/src/index.js

Line 107 in d4a3013

currentComponent.__hooks ||

Because, at the time of calling getHookState function, currentComponent variable is undefined. So, trying to access currentComponent.__hooks fails.

Error output

 FAIL  src/Home.test.tsx > Home > should render Home
TypeError: Cannot read properties of undefined (reading '__H')
 ❯ m file:/Users/emrebaba/sandbox/preact/vite-preact-test/node_modules/preact/hooks/dist/hooks.mjs:1:151
 ❯ d file:/Users/emrebaba/sandbox/preact/vite-preact-test/node_modules/preact/hooks/dist/hooks.mjs:1:792
 ❯ s file:/Users/emrebaba/sandbox/preact/vite-preact-test/node_modules/preact/hooks/dist/hooks.mjs:1:628
 ❯ Module.useMutation file:/Users/emrebaba/sandbox/preact/vite-preact-test/node_modules/@urql/preact/dist/urql-preact.mjs:225:11
 ❯ d.Home [as constructor] src/Home.tsx:14:27
     12|
     13| export const Home = () => {
     14|   const [result, mutate] = useMutation(mutation);
       |                           ^
     15|
     16|   return 
Hello world!
;
 ❯ d.M [as render] node_modules/preact/dist/preact.js:1:7851
 ❯ I node_modules/preact/dist/preact.js:1:5598
 ❯ m node_modules/preact/dist/preact.js:1:2096
 ❯ I node_modules/preact/dist/preact.js:1:5831
 ❯ m node_modules/preact/dist/preact.js:1:2096

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/1]⎯

Test Files  1 failed (1)
     Tests  1 failed | 1 passed (2)
      Time  2.18s (in thread 6ms, 39248.40%)

To Reproduce
I created a simple repository to show the issue => https://github.com/EmreErdogan/vite-preact-test

Steps to reproduce the behavior:

1. Clone the repository (sorry, couldn't make the tests play nice with CodeSandbox/Stackblitz environments)
2. cd into it and run npm install
3. run npm run test

Expected behavior
Test should succeed.

[JoviDeCroock]

This isn't really a Preact issue, to make this work you would need to add something like this to the vite-config I assume

  optimizeDeps: {
    include: ['preact/hooks', 'preact/compat', 'preact']
  },

This because we see a duplicate entry of preact in the bundle atm CC @marvinhagemeister should we also mirror this in the vite-preset. We use this trick in the prefresh-tests as well

[EmreErdogan]

Hi @JoviDeCroock Thanks for your attention!

I tried your suggestion

  optimizeDeps: {
    include: ['preact/hooks', 'preact/compat', 'preact']
  },

but I got the same error. As a side note I've managed to make the same setup work withreact instead of preact without any problem. But I'd definitely stick with preact if I could find a solution for this issue.

Thanks again 😊

[JoviDeCroock]

I tried that solution with your reproduction and it worked perfectly 😅 oh nvm, it only happens in test? we might need something similar for vitest let me explore

[EmreErdogan]

Really appreciate that. I'd happily contribute to this if you direct me to the correct path 😬

[RapidOwl]

@EmreErdogan I just ran into this issue with Preact + Vitest and found this solution on a similar issue on the Vitest repo: vitest-dev/vitest#1652 (comment). Forcing the aliased module to load using require fixed it for me.

Stuck this at the top of my vite.config.js:

import { createRequire } from 'module';

const require = createRequire(import.meta.url);

Then I've got a resolve section in the object I pass to defineConfig.

resolve: {
	alias: [
		{
			find: 'preact/hooks',
			replacement: require.resolve('preact/hooks')
		}
	]
}

This is apparently due to the way Vite imports unprocessed modules. I don't really understand the CJS vs ESM madness and wish it wasn't a thing.

Weirdly, I only had this problem with preact/hooks. htm/preact worked fine without require.

[nakaakist]

In a project that aliases react to preact using preact/compat, I had to slightly modify @RapidOwl 's solution.

At the top of vite.config.js:

import { createRequire } from 'module';

const require = createRequire(import.meta.url);

Then, add the following inside the defineConfig:

resolve: {
  alias: [
    {
      find: 'react',
      replacement: require.resolve('preact/compat'),
    },
    // below is the same as https://preactjs.com/guide/v10/getting-started#aliasing-react-to-preact
    { find: 'react-dom/test-utils', replacement: 'preact/test-utils' },
    { find: 'react-dom', replacement: 'preact/compat' },
    { find: 'react/jsx-runtime', replacement: 'preact/jsx-runtime' },
  ],
}