Components blinks during/after application rendering. How to debug and fix that kind of issues?

[KoderFPV]

Hi, We are using react-imported-component and its lazy loading mechanism a lot in our application. We are lazy loading many many components, and we have SSR rendering, but without streaming support yet, just a standard combination of webpack + express + renderToString.

Very often we face issues where some parts of our application blinks during rendering. We assume that these parts are components what did not match, somehow server-side rendering results of it. It is probably beaking of react hydration... probably. Or maybe we are wrong?

Anyway, do you know how to debug and fix that kind of issues? From time to time, reverting lazy import helps, but sometimes we don't even know which import it could be.

[theKashey]

Hey, sorry for noticing this issue after 🤷‍♂️ quite a while, I hope it's never too late.

There are many reasons why something might went south, and multiple ways to debug it. Without understanding how your application is written and how exactly imported is used - I cannot really help.

And there is a simple operation you can try first:

• follow https://github.com/theKashey/react-imported-component#importedjs to create .imported.js and/
• set

module.exports = configure({
   configuration: {
     checkSignatures: false,
  },
})

• or you can call setConfiguration({checkSignatures:false}) directly

That would disable some extra checks which might be broken due to "optimization-sensitive" imported expectations.

[KoderFPV]

Ok maybe it's more a year after I posted this issue, but our problem was a lack of understanding of creating a .imported.js file. We didn't do that at the beginning, so we had a problem with blinking components.

After we created .imported.js, blinking was gone, and everything works :)