Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
2 tasks done
kiahjh opened this issue Mar 13, 2025 · 0 comments
Open
2 tasks done
Labels
bug Something isn't working needs triage

Comments

@kiahjh
Copy link

kiahjh commented Mar 13, 2025

Duplicates

  • I have searched the existing issues

Latest version

  • I have tested the latest version

Current behavior 😯

If I nest any jsx tags inside the 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 kiahjh added bug Something isn't working needs triage labels Mar 13, 2025
@kiahjh kiahjh changed the title [Bug?]: When using TanStack Router, nesting JSX tags inside of <Link> causes hydration error∂ [Bug?]: When using TanStack Router, nesting JSX tags inside of <Link> causes hydration error Mar 13, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working needs triage
Projects
None yet
Development

No branches or pull requests

1 participant