Hydration issue when Dynamic Component have wrapped children

0xHexE commented 2 years ago

Describe the bug

        ...$theme.typography.LabelSmall,
      })}
    >
      {props.$startEnhancer && (
        <div
          class={css({
            marginRight: props.children ? $theme.sizing.scale400 : 0,
            display: 'flex',
            alignItems: 'center',
            placeContent: 'center',
          })}
        >
          {props.$startEnhancer()}
        </div>
      )}

      <span>{props.children}</span>

      {props.$endEnhancer && (

If I am wrapping the component inside of the span then it is having some hydration issue.

Your Example Website or App

https://github.com/anthaathi/anthaathi/blob/main/apps/anthaathi-commerce-web-client/src/Features/Core/Components/Button/index.tsx

Steps to Reproduce the Bug or Issue

Create a dynamic component with SSR
Pass dynamic value
and create dynamic componenta components

Expected behavior

Should work without hydration issue

Screenshots or Videos

No response

Platform

OS: [e.g. macOS, Windows, Linux]
Browser: [e.g. Chrome, Safari, Firefox]
Version: [e.g. 91.1]

Additional context

What does this error means?

Unable to find DOM nodes for hydration key: 0-0-0-0-0-0-0-0-0-0-0-0-1-0-0-0-0-0-4-0-2-0

ryansolid commented 2 years ago

It means that something is getting created out of order. I've done a ton of fixes over the last few days in this are because there were some gaps in the fixes I did for SSR spreads. First thing I'd definitely do is a fresh install with the latest because I believe I've addressed this issue completely with 1.5.6 (of both solid-js and babel-preset-solid) but always possible I've missed some cases.

I'll take a look in a bit to see if I can see anything with your example.

0xHexE commented 2 years ago

Hi @ryansolid,

I updated the version to the latest for both solid-start and solid. Still, issue is the same.

{
  "devDependencies": {
    "@types/compression": "^1.7.2",
    "prettier": "^2.7.1",
    "solid-start-node": "0.1.0",
    "ts-node": "^10.9.1",
    "typescript": "^4.8.3",
    "vite": "^3.1.3",
    "vite-plugin-solid": "^2.3.6",
    "vite-plugin-svg-inject": "^1.0.6"
  },
  "dependencies": {
    "@anthaathi/oracle-apex-solid-icons": "^0.0.9",
    "@anthaathi/solid-styletron": "^0.2.0",
    "@solidjs/meta": "^0.28.0",
    "@solidjs/router": "^0.4.3",
    "solid-js": "^1.5.6",
    "solid-start": "0.1.0",
    "undici": "^5.10.0"
  }
}

And one more suggestion when we do spread it will be good if we ignore functions spreading to native elements.

    <Dynamic
      component={props.$as ?? 'button'}
      {...filterProps(props)}

0xHexE commented 2 years ago

Hello,

Just FYI. const c = children(() => <span>{props.children}</span>); When I did this it worked without hydration issues.

ryansolid commented 2 years ago

This is a hydration issue we've had for a long time that probably has been flying under the radar before the new warnings. It is fixed in babel-plugin-jsx-dom-expressions 0.34.11. A fresh install (without lock) should bring it in. It will also be bumped in the next Solid release.

appurist commented 1 year ago

FYI, I had the same issue just now, but the out-of-order comment alerted me to the issue in my case. In case it helps others, I had an async function for a component. Removing async resolved it (of course I have other stuff to resolve now but it's mine).

solidjs / solid