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

[Bug?]: When using TanStack Router, nesting JSX tags inside of `<Link>` causes hydration error

Open kiahjh opened this issue 9 months ago • 0 comments

Duplicates

  • [x] I have searched the existing issues

Latest version

  • [x] I have tested the latest version

Current behavior 😯

If I nest any jsx tags inside the <Link> tag provided by @tanstack/solid-router (example: <Link to="/"><b>Home</b></Link>), it causes the following error:

TypeError: template2 is not a function at getNextElement (http://localhost:3000/_build/node_modules/.vinxi/client/deps/chunk-4JBQOQO5.js?v=a56f0fa8:290:12) at Object.fn (http://localhost:3000/_build/node_modules/.vinxi/client/deps/chunk-4JBQOQO5.js?v=a56f0fa8:675:43) at runComputation (http://localhost:3000/_build/node_modules/.vinxi/client/deps/chunk-IYP4Z4GE.js?v=a56f0fa8:729:22) at updateComputation (http://localhost:3000/_build/node_modules/.vinxi/client/deps/chunk-IYP4Z4GE.js?v=a56f0fa8:711:3) at Object.readSignal (http://localhost:3000/_build/node_modules/.vinxi/client/deps/chunk-IYP4Z4GE.js?v=a56f0fa8:647:67) at resolveChildren (http://localhost:3000/_build/node_modules/.vinxi/client/deps/chunk-IYP4Z4GE.js?v=a56f0fa8:1025:84) at resolveChildren (http://localhost:3000/_build/node_modules/.vinxi/client/deps/chunk-IYP4Z4GE.js?v=a56f0fa8:1029:22) at resolveChildren (http://localhost:3000/_build/node_modules/.vinxi/client/deps/chunk-IYP4Z4GE.js?v=a56f0fa8:1025:68) at resolveChildren (http://localhost:3000/_build/node_modules/.vinxi/client/deps/chunk-IYP4Z4GE.js?v=a56f0fa8:1025:68) at resolveChildren (http://localhost:3000/_build/node_modules/.vinxi/client/deps/chunk-IYP4Z4GE.js?v=a56f0fa8:1025:68)

I created a repo that demonstrates the error here: https://github.com/kiahjh/ts-router-solid-start-ssr-link-bug-demo/blob/master/src/routes/__root.tsx#L17

Expected behavior 🤔

No error; for instance, a tag should just make the content bold without causing a hydration error.

Steps to reproduce 🕹

Steps:

  1. pnpm create solid@latest
  2. choose SolidStart
  3. choose tanstack-router template
  4. Find a <Link> tag and nest some jsx in it

Context 🔦

Specifically, I was building a sidebar navigation component, and wanted nicely styled sidebar links with icons and styled text; but nesting these elements inside a <Link> tag caused the issue described.

Your environment 🌎

OS: macOS
Browser: Arc (Chromium)
Version: Chromium v134.0.6998.45

Using pnpm v9.12.1

These packages:
    "@solidjs/start": "^1.1.2",
    "@tailwindcss/vite": "4.0.11",
    "@tanstack/router-plugin": "^1.112.0",
    "@tanstack/solid-router": "^1.112.2",
    "clsx": "2.1.1",
    "lucide-solid": "0.475.0",
    "solid-js": "^1.9.5",
    "tailwindcss": "4.0.11",
    "vinxi": "^0.5.3"

kiahjh avatar Mar 13 '25 16:03 kiahjh