Nextjs + Preact + Webpack 5 | Error: Hook can only be invoked from render methods

[tbgse]

Hi Preact team. First of all thanks for the amazing work 🌮

Describe the bug
Whenever using any hooks with webpack 5 / next / preact I'm observing the following error when running the dev server:

Error: Hook can only be invoked from render methods.
    at Object.preact__WEBPACK_IMPORTED_MODULE_0__.options.__h (/home/tbgse/dev/webpack-5-test/.next/server/pages/_document.js:1281:7106)

and this error when trying to build

Error occurred prerendering page "/". Read more: https://err.sh/next.js/prerender-error
TypeError: Cannot read property '__H' of undefined
    at hooks_m (/home/tbgse/dev/webpack-5-test/.next/server/pages/_app.js:46:208)
    at hooks_y (/home/tbgse/dev/webpack-5-test/.next/server/pages/_app.js:46:580)

I'm not sure if this is a problem with preact itself or possibly with the next-plugin-preact. This bug does only occur after making the switch to webpack5. Before everything worked just fine. This is not an issue of misusing the hook outside of a render method, the same code is working just fine when using react or preact + webpack4.

To Reproduce
I have created an example repo here:
https://github.com/tbgse/preact-webpack5-next

This includes the following steps

• Fresh nextjs project on latest version
• customized next.config.js to enable webpack 5
• add next-plugin-preact for preact support
• added a small hello world useEffect hook in pages/index.js

Expected behavior
Hooks should work correctly

[marvinhagemeister]

Some preliminary findings: The error is caused by module aliasing not working for some reason in node. The rendered DOM tree is passed to react-dom/server instead of preact/compat/server. Don't know why yet.

[tbgse]

really appreciate that you're looking into it so quickly. Do let me know if you need any further info or if there is anything I can do to help.

[marvinhagemeister]

Some more information: It's a combination of two issues:

• Next now loads both react and react-dom eagerly, before we are able to set up any aliasing
• Next mixes CJS with ESM bundles generated by webpack which loads 2 copies of Preact. This is not an issue in React because they don't support ESM, only CJS Prevent dual package hazard in webpack5 #26

[tbgse]

Hi @marvinhagemeister I saw that you merged some work to fix the duplicated copy of Preact. When testing, did that fully resolve the issue or do we indeed also need to wait for more adjustments to work with the new eager loading of react / react-dom for this issue to be resolved?

[marvinhagemeister]

@tbgse The eager aliasing is not working yet.

[tbgse]

@marvinhagemeister thanks for the update. Do you already know how much effort this will be to resolve? I'm trying to come up with a timeline for us to migrate to webpack 5. The problem is that we cannot upgrade to the latest versions of next because prefresh is not supported in webpack 4 mode with the latest versions. So we're a few minor versions behind with next now already.

Again if you already have a hunch how this problem could be solved, let me know and I'm happy to dig a bit myself too.

[JoviDeCroock]

Hey @tbgse

Prefresh supports next v10 with webpack 4 we have a full test suite for both v5 and v4

[tbgse]

hi @JoviDeCroock then i might have misunderstood our conversation here: preactjs/prefresh#274

webpack 4 + next 10.0.6 upwards still fail for us with the errors described in the issue. I assumed that the right way to go here would be moving to webpack 5 (which in return lead to the issues described here).

Let me know if I missed out on a way to make it work with webpack 4.

[JoviDeCroock]

Adding webpack as a dep does the trick normally, just adding webpack 4. Oddly enough as of latest next it works for me without

You can check the prefresh/test/fixture/next folder for webpack 4 and next-webpack5 for webpack 5

[tbgse]

@JoviDeCroock ugh, i was so focused on solving this with webpack 5 that i never thought about actually adding v4 as local dependency 🤕 it works perfectly even with latest next after adding it, thanks!

I'd still appreciate it, if this issue could be kept open just because it'd be quite nice to be able to move to webpack 5 eventually.

[JoviDeCroock]

@tbgse well webpack 5 works as well, it just has one issue with styled-components which I haven't gotten to the bottom of as it works with normal webpack 5 but fails when next 10 is involved.

But generally you should be able to just migrate to Next10 Webpack 5 as well, my tests run well in the prefresh repo. https://github.com/JoviDeCroock/prefresh/tree/main/test/fixture/next-webpack5

[tbgse]

@JoviDeCroock oh i was referring to this issue with the preact plugin that marvin mentioned above where:

Next now loads both react and react-dom eagerly, before we are able to set up any aliasing

which is an issue with this plugin rather than prefresh.

A bit off topic, but do you have more info on the styled-components issue with prefresh that you're looking into? We've also noticed a problem with styled components locally where they don't update with HMR but require a hard refresh. Could this be related?

[JoviDeCroock]

@tbgse the issue is now on their radar as well :)

vercel/next.js#23130
vercel/next.js#23512