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

[jasonhilldm]

Describe the bug
I have used preact-cli to create a new TypeScript project and have made zero changes to the code. I then run preact build --no-prerender to generate the production files.

When I hit the index.html in a browser the home page loads fine but when I click the "Me" nav link, I get the error "Uncaught TypeError: Cannot read properties of undefined (reading '__H')". If I click the "John" link, that route loads fine and then clicking on the "Me" link again also loads fine the second time.

If I refresh the browser on any route other than the home page, I also get the same error.

To Reproduce

1. Run npx preact-cli create typescript test
2. Run preact build --no-prerender
3. Browse the index.html of the production build
4. Navigate to the Me link in the nav (error occurs).
5. Naviugate to the Jonn link in the nav (no error).
6. Refresh the John link in the nav (error occurs).

I'm assuming this must be something specific in my environment but I'm not sure how to figure out what is causing this problem, so any pointers are greatly appreciated.

[rschristian]

You're not opening build/index.html directly, are you? That will cause issues.

Use the serve command -- it's a prod-like server for your built output.

[jasonhilldm]

Ah right...I am hosting the production build within my ASP.Net web app that will include an API, so essentially am loading the index.html directly in the browser. What's the correct approach for deploying the production build into a web server? Is there a guide on that?

[rschristian]

Having a server (any server) serve the app is fine, I'm just making sure you're not using the file protocol (file://). The other required resources will not be allowed to be accessed.

What's the correct approach for deploying the production build into a web server?

It's just static output. Serve as you would any static assets.

Edit: Are you getting any other errors in your browser console? I cannot reproduce anything, so it's likely a serving error, but without more info I can't really help.

[jasonhilldm]

Unfortunately, there is only that one console error. It's weird that it is working fine on the home page and the John profile route and then for the Me profile route on the second click (as per my repro steps).

It seems to be happening in the getHookState function where currentComponent is undefined. The call stack shows that it is occurring as part of the flushAfterPaintEffects function.

Hooks are only being used in the profile route so the preact/hooks script is being included during the async load of the profile chunk. Is there some kind of timing issue here because after the chunk is loaded and cached by the browser, subsequent hooks in the profile route work fine.

I did another test by adding a useEffect call to the home route and got the same error on the first hit, but subsequent hits to the home route worked fine though. It seems to be an issue when effects are being used.

I also added a call to useEffect in Header.tsx to ensure that the the hooks script was included in the ain bundle but also got the same error.

[rschristian]

Have you tried removing the installed service worker? Possibly could be a cache issue.

[jasonhilldm]

I just created a build without the service worker but still getting the same error.

[rschristian]

Creating a new build only stops a new service worker from being output.

You should try manually removing the existing through your dev tools (process differs by browser).

[jasonhilldm]

Yep - that worked. I unregistered the service worker and then everything works fine without any errors. Thanks so much for your help. Does this mean there is an issue with the service worker that needs further investigation?

[rschristian]

Does this mean there is an issue with the service worker that needs further investigation?

No. Service workers cache resources (at least this one does), so if it's installed and caches a bad resources (ran a build with broken code, for example) you can have a bit of an issue.

As the SW will likely cache for the entire domain, you easily could have a SW still registered from another project (you're likely to reuse localhost).

Cache invalidation is obviously it's own, huge problem, but we do not automatically uninstall & replace attached SWs. You can do this if you want to, as well as fully customize the SW, but it's not really an issue.

I imagine you just had created a bad resources that then got stuck in the SWs cache.

[jasonhilldm]

OK - thanks for the clarification. I might avoid SW for the time being until I get a better handle on what I am doing!

[rschristian]

Totally reasonable. Very powerful, and allow you to create PWAs, but certainly can create headaches too!

I'll close this out now as it sounds like the issue as been resolved.