Comments out certain markup during hydration in latest version

[ljosberinn]

Hi, just noticed that in the latest version. Repo is Next.js; you can see its correct server-side as its shortly visible before hydration kicks in.

Reproduction

PR for 10.5.10 - deployment

PR for 10.5.11 - deployment

source

between those, only dev dependencies were merged

Expected Behavior

No diff between server and client.

Actual Behavior

Client behaves differently.

[kirchoni]

Hello,

I'm also experiencing this, but in gatsby project.

Please let me know if i can provide any additional information to help resolving this issue.

[marvinhagemeister]

A short codesandbox or repo would be a godsend. If we can reproduce errors on our machines it's much easier for us to get to the bottom of it 👍

[ljosberinn]

Sorry, was at work! There you go.

https://github.com/ljosberinn/preact-hydration-bug
https://preact-hydration-bug.vercel.app/

[marvinhagemeister]

@ljosberinn Awesome, thank you so much for the repro case. With it I was able to narrow it down to the server side rendered HTML not being generated by preact-render-to-string. Instead the generated output comes from react-dom/server, whose output differs slightly enough by including comment nodes in the HTML that in turn trip up our reconciler.

A fix for this is to replace the custom withPreact() function in next.config.js with our official plugin for nextjs next-plugin-preact:

+ const withPreact = require("next-plugin-preact");
+
+ module.exports = withPreact({
+   // other custom nextjs config here
+ });
- const withPreact = (config, options) => {
-   if (!options.dev) {
-     const splitChunks = config.optimization && config.optimization.splitChunks;

-     if (splitChunks) {
-       const { cacheGroups } = splitChunks;
-       const test = /[\\/]node_modules[\\/](preact|preact-render-to-string|preact-context-provider)[\\/]/u;
-       if (cacheGroups.framework) {
-         cacheGroups.preact = {
-           ...cacheGroups.framework,
-           test,
-         };

-         cacheGroups.commons.name = "framework";
-       } else {
-         cacheGroups.preact = {
-           chunks: "all",
-           name: "commons",
-           test,
-         };
-       }
-     }

-     const aliases = config.resolve.alias || (config.resolve.alias = {});
-     aliases.react = aliases["react-dom"] = "preact/compat";
-     aliases["react-ssr-prepass"] = "preact-ssr-prepass";
-   }
- };

- module.exports = {
-   webpack: (config, options) => {
-     withPreact(config, options);
-
-     return config;
-   },
- };

With that in place the issue is resolved for me:

I made a PR with the necessary changes: ljosberinn/gerritalex.de#387

[marvinhagemeister]

@kspeyanski Can you file a separate issue? They are likely not related, even though the symptoms may look similar.

[kirchoni]

Hello @marvinhagemeister ,

I've created the following project where the exact same issue (commenting out certain markup after hydratation) is reproducible: please find it here: https://github.com/kspeyanski/preact-hydratation-bug

I still suspect that the gatsby and nextjs issues are related as both:

• results in the exact same markup
• are only reproducible with version 10.5.11 of preact

Please further advice if a separate issue is needed, as at this point i would have to give it an exact same title as this one, and i would like to avoid spam.

[marvinhagemeister]

@kspeyanski Thanks for the repro! Just took a look and you're right in that it is caused by the same issue as in the next plugin. They are using React to render a virtual tree built by Preact on the server. I'm kinda surprised that this setup worked at all, but then again it's sort of a good testament to how strong our compatibility layer is.

To resolve the issue in your repo, install these additional packages:

yarn add react@npm:@preact/compat react-dom@npm:@preact/compat

[kirchoni]

Thank you @marvinhagemeister for the fast response.

However, my specific use case does not allow for installing the packages through aliasing, thus i'm resolving the issue by downgrading to v10.5.10 for now.

Feel free to reach me out in case you need more information.

[marvinhagemeister]

@wardpeet Do you know of a way to swap out the server renderer in Gatsby via a plugin?

[wardpeet]

That should be with gatsby-plugin-preact, I'll try the reproduction and fix it in the plugin. Thanks for the ping!

[marvinhagemeister]

FYI: We just released 10.5.12 which reverts that change that lead to this issue 👍