Skip to content
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

Error: Cancel rendering route and TypeError: Cannot read properties of null (reading '__H') when using Next.js Router #3512

Closed
1 task done
laymonage opened this issue Apr 9, 2022 · 3 comments

Comments

@laymonage
Copy link

laymonage commented Apr 9, 2022

  • Check if updating to the latest Preact version resolves the issue

Describe the bug
Using the latest Preact (10.7.1) and Next.js (12.1.4) and React 18 installed, changing the route (e.g. calling Router.replace, Router.push) will throw three errors:

  • Error: Cancel rendering route
  • TypeError: Cannot read properties of null (reading '__H')
  • TypeError: Cannot read properties of null (reading '__H')

Next.js requires React to be installed (otherwise the server won't start), that's why I have it installed. With React 17, it works fine.

To Reproduce
Link: https://codesandbox.io/s/dank-frost-eeb42x
Also on GitHub: https://github.com/laymonage/repro-preact-nextjs-router-issue

Steps to reproduce the behavior:

  1. Go to https://codesandbox.io/s/dank-frost-eeb42x
  2. Click on the "Demonstrate the issue" button
  3. See error

Expected behavior
No errors

Notes
I don't know if this issue should be fixed in Next.js or Preact.

Possibly related: #3393, #3261

@laymonage laymonage changed the title Error: Cancel rendering route and TypeError: Cannot read properties of null (reading '__H') when using Next.js Router Error: Cancel rendering route and TypeError: Cannot read properties of null (reading '__H') when using Next.js Router Apr 9, 2022
@JoviDeCroock
Copy link
Member

JoviDeCroock commented Apr 9, 2022

This might be a Next.JS thing, we have already had a few issues that were mentioned in #3393 that is on their side with regards to duplicated Preact bundles etc. TypeError: Cannot read properties of null (reading '__H') typically points at a duplicated bundle or one not getting called 😅

Generally however, we advise to replace react as a dep with @preact/compat like we examplified in the next-plugin https://github.com/preactjs/next-plugin-preact

Concretely: https://github.com/preactjs/next-plugin-preact/blob/master/packages/demo/package.json#L15-L16

@laymonage
Copy link
Author

Thanks! I just remembered that I used to do it that way, but then I encountered the same problem as preactjs/next-plugin-preact#53. It's fixed if esmExternals is false, but I'm not sure if that should be necessary.

esmExternals: false is not needed if I install React 17 instead of using @preact/compat.

@liby
Copy link

liby commented Jun 6, 2022

Any progress on that?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants