Using both preact and preact/compat

[dirslashls]

Hello, I have an app that depeneds on preact/compat. However, it depends on a library that depends on preact only. Can these two coexist? Asking this because I am getting the error "Hook can only be invoked from render methods" in development mode but everything seems to work fine without the devtools enabled. How should I go about troubleshooting this?

[andrewiggins]

Yup, they can co-exist. Uncertain why you see that error. Might be due to having multiple copies of Preact in your bundle. Would need to know more about your setup.

In case it's helpful, here is a repo I built showing how to configure a variety of bundlers to work with preact & preact/compat: https://github.com/andrewiggins/preact-bundling

[ritschwumm]

afaik, using preact/compat together with code that only depends on preact can be problematic:
once you touch preact/compat, the behaviour of onInput and onChange undergoes slight changes and the library not using preact/compat may rely on the unchanged behaviour.

[marvinhagemeister]

That's the only thing where importing preact/compat could affect existing non-compat code. I've never heard of anyone running into issues with that so far.

[ritschwumm]

@marvinhagemeister i did in fact run into this in my work project and spent quite some time and swear words finding out why our (inhouse) forms library suddenly stopped working correctly.
it was a bit of a surprise that the root cause was someone else adding a seemingly innocious import from preact/compat in a completely unrelated place.
"spooky action at a distance" at it's best :)

[dirslashls]

Thanks @ritschwumm for the caution. I will keep that in mind. I eventually managed to get rid of the "Hooks can only ..." error message. I had to remove a useEffect that was doing a state update using a function callback by moving it into an action handler where the corresponding state changes. Since the state update is function based, both changes will be applied and what is desired. I tried my best to create a standalone test case but couldn't succeed.

Also, the library uses preact as an external dependency injected via requirejs and so I just defined

define('preact',() => ({ ...compat, options: preact.options }));

to make preact/compat available to the library as preact and everything seems to work fine. I had to patch the options because tsc generates a small snippet of code in the bundled js code that has

return preact.options.vnode&&preact.options.vnode(i)

As preact/compat doesn't have options object, I had to do the above. Everything seems to work fine.