Does anyone who uses Next.js with ReScript ever faced an issue when server and client markups of dynamically loaded component don’t match? I.e. an error like:
Did not expect server HTML to contain a <div> in <div>
The markups themselves are the same. I rechecked it multiple times and pretty sure it’s not some silly issue when markups are actually different.
I spent the whole day trying to hunt it down, disassembled the app and was able to reproduce it only when dynamic gets imported via require instead of import. But in the app itself dynamic gets imported via import in the generated code. The last thought was that it’s something with next-transpile-modules but it shouldn’t touch these modules and I can’t repro it on the simple case. So I’m out of ideas why this happens.
As you can see the <Wonka.Pixels /> component is still trying to be loaded on the server while SSR is FALSE.
Also, I am not sure the correct import is being made coming from a mjs file from rescript (I have tried import("") and import("").make but both result in the same error. If it should be import().make how would I implement this within the rescript DynamicPixels.res file?
Yeah we should probably add a curated dynamic imports example.
I can recall that using the import_ binding was problematic, and that a raw expression on the usage site was the only way to make it behave correctly (I am currently not sure what magic Next involves to understand dynamic imports).
That is exactly what I ended up going with, just made a simple component locally rendered the shared component from a pinned dependency and then used JS to use next/dynamic and then created a simple binding to that JS component and we were in business.
I also can now simply use a then() in JS to resolve to module.make as well