Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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.

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
     13| export const Home = () => {
     14|   const [result, mutate] = useMutation(mutation);
       |                           ^
     16|   return <div>Hello world!</div>;
 ❯ 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


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 =>

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.

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

RapidOwlcommented, Sep 8, 2022

@EmreErdogan I just ran into this issue with Preact + Vitest and found this solution on a similar issue on the Vitest repo: 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.

EmreErdogancommented, Mar 4, 2022

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Cannot read property 'errors' of undefined in mutations - Help
Cannot read property 'errors' of undefined in mutations ... in my project and got errors in mutations and it happens only in the...
Read more >
Apollo UseMutation: TypeError: Cannot read property 'data' of ...
I have confirmed that the data from useQuery successfully returns data. The useMutation should return a url that I need use in router.push(dataU ......
Read more >
Handling Errors with Apollo Client (React) - YouTube
In this video I talk about handling errors when running queries and mutations using Apollo Client in a React project.Table of contents:00:00 ...
Read more >
React TypeError: Cannot read property function of undefined
JavaScript Optional Chaining in 5 Minutes (No more " cannot read property of undefined "!) · Top 5 Excel Functions for Finance People...
Read more >
Mastering Mutations in React Query | TkDodo's blog
useMutation will track the state of a mutation, just like useQuery does for queries. It'll give you loading, error and status fields to...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found