solid-start
solid-start copied to clipboard
[Bug?]: When using TanStack Router, nesting JSX tags inside of `<Link>` causes hydration error
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:
pnpm create solid@latest- choose SolidStart
- choose tanstack-router template
- 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"