Preact Compat works on Server Side but not on Client Side

[csantany]

Hi, I just tried to implement preact-compat using webpack like this:

resolve.alias = {
      'react': 'preact-compat',
      'react-dom': 'preact-compat'
};

Everything looks good on the server side, but for some reason on the client is not working properly (if you see my gif, you'll see that on the first load you can see the content but after a second removes everything and if I inspect the HTML I got

Any idea?

Thanks, Carlos.

[FallOutChonny]

Did you solve it? I have same issue in my SSR project 😢

[csantany]

Not yet and looks like this project is not maintained any more, I continue using React.

[developit]

This is likely caused by code splitting, which means there'd be no difference when using preact or react.

[FallOutChonny]

I think this is caused by module alias incorrect because I've solved it. your server-side is still using react-dom but client-side use preact-compat

[developit]

yup - have also seen that! it'll cause the root element to be rendered differently, which dumps the whole tree and re-renders on the client. While it's not a great symptom, that's actually the correct behavior for Preact (mismatched root shouldn't reuse elements).

[csantany]

I tried one more time with my current project, and my results are pretty much the same, works perfect the Server Side Rendering, but the Client Side just give me a blank page.

I'm using React 16.0.0 (hydrate)

With SSR:

With Client Side:

[csantany]

@developit why you gave me a 👎 , when I said this project is not maintained or they don't care about issues, is because took 4 months even to receive a response :/

[csantany]

@FallOutChonny how exactly did you solved?

[cdaringe]

i have completely stripped react/react-dom from my project, and i still suffer these symptoms. what debug data can i provide?

[developit]

@csantany because it was an unappreciative comment. preact-compat is a community project, not a corporate-sponsored endeavor, and as such it depends on volunteers for maintenance. Many of the volunteers here don't use preact-compat extensively and prefer to only use the preact core ecosystem.

The original gif was pretty hard to see, but I just looked again and I'm seeing an <undefined> component, which generally happens if an Object is present in the Virtual DOM tree that isn't a valid component. Most often this is a result of importing a non-existent default export (import foo from './foo' where './foo has no default export), or using something like Fragments that preact doesn't support.

@cdaringe I know you've probably moved on from this issue, but I figured I'd mention that in this case if you can select the root element of your DOM in DevTools' Elements panel, then log out $0._component you should be able to see the offending Virtual DOM tree.