Hydration is not working sometimes on some pages

[mahyarstudocu]

💬 Questions and Help

Hi there.
we are using loadable alongside React18 in our project. on some pages (not all of them) sometimes (not always) react components are being rendered correctly on the server, but the hydration is not working which causes the JS functionality not working on client.
Also, it's good to mention that there is no error in the console and no clue to find the issue. I tried different ways like refactoring the usage of libraries that we are working with like CKEditor and MathJax but none of them solved the issue, so I would like to raise this issue here to see if you have any idea as the hydrarion is being wrapped by loadableReady.

[gandazgul]

My issue is the hydration, without any warnings or errors creates another duplicate layout instead of hydrating the server html. Both generated HTMLs are identical and react doesn't complaint about differences.

The layout itself is being loaded with loadable. One thing that's different from all examples is that I created a loader for loadable components:

loader.js

function loadComponent(name) {
  switch(name) {
    case 'ComponentA': {
      const Component = loadable(() => /*webpackChunkName: componentA */ import(@namespace/componentA));
    
      return {
        Component, // render this
        load: Component.load, // used to hookup other things to the framework
        name: 'ComponentA'
      }
    }
  }
}

App.jsx

import loadComponent from loader.js;

function App({layout}) {
return (<div>{loadComponent(layout).Component}</div>);
}

entry.js

loadableReady(() => { hydrateRoot(d.gebid('root'), <App layout={config.layout} />) });

[theKashey]

Yeah, hydration with Suspense can lead to duplicated content instead of hydration failure.
Everything depends on details and without these details, it's hard to help here.

[gandazgul]

@theKashey thank you for your response. I was able to figure out my issue. It was babel preset-env i made modules set to commonjs this was changing the imports and preventing webpack from splitting. I had stopped the client from processing the loader with babel and this was causing the difference between server and client render.

If you are having issues with loadable components not getting split change preset-env modules from commonjs to the default 'auto'.

[dglozic]

Using CommonJS on the client side can also interfere with Webpack tree shaking.

In my corner of IBM, what we do is:

1. Build client and server separately.
2. We build client chunks using Babel for JSX, but leave it pure ES6, using ES6 imports. This code is exposed in package.json via 'module'.
3. We build server side using Babel for JSX + CommonJS transpiling. This code is exposed in package.json via 'main'.
4. We use rollup to build the same React code twice (for client and server as above).

SSR pass will require react components as CommonJS modules. Meanwhile, Webpack will build dependency tries for chunks using pure ES6 imports and tree shaking works properly, resulting in smaller chunks and proper hydration.

[gandazgul]

We do 1 and 2. 2 via npm packages (private repo) that are the raw es6 code without processing. Server and client import them and we have 2 webpack configs one for server and one for client.

I don't understand your 3rd and 4th steps? Do you process the packages again with a server side config and commonjs? Do you publish these separately to a repo?

How do you use roll-up? To build the final application? Why roll-up?

[dglozic]

You can do (1) and (2) with Webpack alone, for UI microservices. We do (3) and (4) when creating reusable React components - I am sorry for putting them together as 1-4. Again, you don't have to use rollup for 3/4, but it is useful for us to run the same build with different config and copy to esm and cjs dist folders, to be consumed on the client and server, respectively.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.