TanStack / TanStack/router

solid-router: wrapInSuspense route option is ignored

Open Beginner friendly
#7,829 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
15.1k
Forks
1.9k
Avg merge
1d 20h
Merged PRs (30d)
143

Description

Which project does this relate to?

Router

Describe the bug

wrapInSuspense is declared in router-core's shared route options, so it typechecks in both adapters, but only react-router actually implements it

react-router - match only gets a Suspense boundary when it needs one, and wrapInSuspense can force it either way:

https://github.com/TanStack/router/blob/0b178a79e2e872df0107bd7f0faa891c4c9815ef/packages/react-router/src/Match.tsx#L161-L168

solid-router - unconditional, route.options.wrapInSuspense is never read anywhere in the package:

https://github.com/TanStack/router/blob/0b178a79e2e872df0107bd7f0faa891c4c9815ef/packages/solid-router/src/Match.tsx#L94

proposed fix

port the react-router condition to solid-router/src/Match.tsx, something like:

const ResolvedSuspenseBoundary = () =>
  (!route().isRoot || route().options.wrapInSuspense || resolvedNoSsr) &&
  (route().options.wrapInSuspense ??
    (resolvePendingComponent() || resolvedNoSsr))
    ? Solid.Suspense
    : SafeFragment
Complete minimal reproducer

https://github.com/teidesu/tanstack-solid-router-wrapinsuspense-repro

Steps to Reproduce the Bug
  1. use wrapInSuspense: false, and add some suspenses
  2. notice how it's not respected
Expected behavior

wrapInSuspense behaves like react-router

Screenshots or Videos

No response

Platform
  • Router / Start Version: 1.170.17
  • OS: macos
  • Browser: chrome, firefox
  • Browser Version: latest
  • Bundler: vite
  • Bundler Version: 7.1.3
Additional context

this was already raised in #5855 but closed without resolution due to lack of repro. im not entirely sure what kind of repro this needs since this is a straight up missing feature, but attached one regardless

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start in packages/solid-router/src/Match.tsx, where route.options.wrapInSuspense is currently not read, and compare the behavior with packages/react-router/src/Match.tsx at the referenced condition. Use the linked minimal reproducer to verify wrapInSuspense: false with nested Suspense components, then confirm the option behaves like react-router for both forced and default cases.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Quiet
Clarity
Clearly specified
Newbie friendliness
76/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.