solid-start icon indicating copy to clipboard operation
solid-start copied to clipboard

Hydration bug (build only) with components from linked dependency

Open aeplay opened this issue 3 years ago • 0 comments

I kept running into hydration issues in my production build of a mostly static site based on the with-tailwind template (SSR yes, TS yes). Dev server always works fine.

The only thing that seems special about my setup is that I import some components from a linked dependency in the same monorepo (using "link:../component-lib" syntax in package.json).

When I manually pull in the components so they're just local, the production build hydrates correctly.

I created a minimal reproduction of the whole setup in https://github.com/aeplay/solid-start-linked-hydration

You can toggle between the two scenarios by un/commenting these lines:

https://github.com/aeplay/solid-start-linked-hydration/blob/3049243436f523111fd550b2d0ccec0d196e82cc/app/src/routes/index.tsx#L1-L7

This is what the dev server renders (yarn dev):

Screen Shot 2022-12-06 at 14 26 41 014

This is what happens in the production build (yarn build && yarn start)

Screen Shot 2022-12-06 at 14 26 23 730

As you can visually see, on hydration, it seems to insert a copy of the preceding MiniStory container into the <em> element inside the MiniStorys that contain an <em>. (Before hydration, the server-rendered HTML looks correct)

In my more complex actual app, I also get lots of errors trying to read nextSibling of null, I guess this minimal scenario is a lucky one where hydration actually finds another (albeit wrong) element to attach to.

Since this differs between dev and build and is related to dependencies, I wonder if this is a side-effect of #127 ?

Thank you for your help.

aeplay avatar Dec 06 '22 14:12 aeplay