Hooks break components when using ts-loader + babel-loader + @prefresh/webpack about prefresh

[JoviDeCroock]

This is an odd one so first thing I noticed is that everything actually works fine when I remove preact/debug it seems like a transform is making <App /> into <undefined /> for a small time until the import is resolved which seems very odd.

So preact/debug is indeed throwing the error correctly but what I can't figure out is why when the three loaders (babel, prefresh and ts) are combined this occurs.

I found the issue in your config:

• we are outputting esm syntax from prefresh
• your tsconfig is transpiling this to cjs https://github.com/Js-Brecht/preact-prefresh-hooks-issue/blob/master/tsconfig.json#L4 changing this to ES2015 fixes it

[Js-Brecht]

Oh! Good catch! I forgot I had set that to CJS while I was testing a TS transformer I was working on.

I also hadn't noticed the preact/debug import... this was a quick project I scaffolded with preact create typescript; I ripped a lot of it out, but I guess I missed that bit. Once I remove that require(), you can see the actual problem I was encountering: inside of <App>, I have a text box that uses useState for state management. It will wind up being mounted to the DOM as <undefined>.

But you're absolutely right. Changing the module setting in tsconfig fixes the entire issue. Thanks!