SSR with `@solidjs/start`

[mrlubos]

Which project does this relate to?

Router

Describe the bug

Hey! I am super excited about Solid Router as seen by my timely comment. I assume this is not currently supported so perhaps a feature request, but how to use the router in SolidStart? Is it the SSR functionality I am requesting? Am I the problem?

Your Example Website or App

https://stackblitz.com/edit/github-grada5-vrkkfmhj?file=app.config.ts,src%2Fapp.tsx

Steps to Reproduce the Bug or Issue

Here's a list of changes I've made to an existing project.

1. Modify app.config.ts

import { defineConfig } from "@solidjs/start/config";
import { TanStackRouterVite } from "@tanstack/router-plugin/vite";

export default defineConfig({
  vite: {
    plugins: [
      TanStackRouterVite({
        autoCodeSplitting: true,
        target: "solid",
      }),
    ],
  },
});

2. Create routes/__root.tsx

import { Outlet, createRootRoute } from '@tanstack/solid-router'

export const Route = createRootRoute({
  component: RootComponent,
})

function RootComponent() {
  return (
    <>
      <div>Hello "__root"!</div>
      <Outlet />
    </>
  )
}

3. Modify app.tsx

import { Router } from "@solidjs/router";
import { FileRoutes } from "@solidjs/start/router";
import { createRouter } from "@tanstack/solid-router";
import { ErrorBoundary, Suspense } from "solid-js";

import { routeTree } from '~/routeTree.gen'

const router = createRouter({ routeTree });

export default function App() {
  return (
    <Router
      root={props => (
        <ErrorBoundary>
          <Suspense>
            {props.children}
          </Suspense>
        </ErrorBoundary>
      )}
    >
      <FileRoutes />
    </Router>
  );
}

This is enough to show the following error trace when I load the root page

Error: Client-only API called on the server side. Run client-only code in onMount, or conditionally run client-only component with .
    at notSup (file:///path-to-project/node_modules/.pnpm/solid-js@1.9.4/node_modules/solid-js/web/dist/server.js:1138:9)
    at file:///path-to-project/node_modules/.pnpm/@tanstack+solid-router@1.110.0_solid-js@1.9.4/node_modules/@tanstack/solid-router/dist/esm/CatchBoundary.js:3:30
    at ModuleJob.run (node:internal/modules/esm/module_job:268:25)
    at async onImport.tracePromise.__proto__ (node:internal/modules/esm/loader:543:26)
    at async SSRCompatModuleRunner.directRequest (file:///path-to-project/node_modules/.pnpm/vite@6.1.0_@types+node@22.13.1_jiti@2.4.2_lightningcss@1.29.1_terser@5.39.0_tsx@4.19.2_yaml@2.7.0/node_modules/vite/dist/node/module-runner.js:1220:24)
    at async SSRCompatModuleRunner.cachedRequest (file:///path-to-project/node_modules/.pnpm/vite@6.1.0_@types+node@22.13.1_jiti@2.4.2_lightningcss@1.29.1_terser@5.39.0_tsx@4.19.2_yaml@2.7.0/node_modules/vite/dist/node/module-runner.js:1167:76)
    at async eval (/path-to-project/packages/frontend/src/app.tsx:3:1392)
    at async ESModulesEvaluator.runInlinedModule (file:///path-to-project/node_modules/.pnpm/vite@6.1.0_@types+node@22.13.1_jiti@2.4.2_lightningcss@1.29.1_terser@5.39.0_tsx@4.19.2_yaml@2.7.0/node_modules/vite/dist/node/module-runner.js:1049:5)
    at async SSRCompatModuleRunner.directRequest (file:///path-to-project/node_modules/.pnpm/vite@6.1.0_@types+node@22.13.1_jiti@2.4.2_lightningcss@1.29.1_terser@5.39.0_tsx@4.19.2_yaml@2.7.0/node_modules/vite/dist/node/module-runner.js:1271:61)
    at async SSRCompatModuleRunner.directRequest (file:///path-to-project/node_modules/.pnpm/vite@6.1.0_@types+node@22.13.1_jiti@2.4.2_lightningcss@1.29.1_terser@5.39.0_tsx@4.19.2_yaml@2.7.0/node_modules/vite/dist/node/chunks/dep-CfG9u7Cn.js:30895:23)
    at async SSRCompatModuleRunner.cachedRequest (file:///path-to-project/node_modules/.pnpm/vite@6.1.0_@types+node@22.13.1_jiti@2.4.2_lightningcss@1.29.1_terser@5.39.0_tsx@4.19.2_yaml@2.7.0/node_modules/vite/dist/node/module-runner.js:1167:76)
    at async eval (/path-to-project/node_modules/.pnpm/@solidjs+start@1.1.0_solid-js@1.9.4_vinxi@0.5.3_@types+node@22.13.1_db0@0.2.4_encoding@0.1.13_pidz6qqluodhhcgw3pqnou2kha/node_modules/@solidjs/start/dist/server/StartServer.jsx:3:575)
    at async ESModulesEvaluator.runInlinedModule (file:///path-to-project/node_modules/.pnpm/vite@6.1.0_@types+node@22.13.1_jiti@2.4.2_lightningcss@1.29.1_terser@5.39.0_tsx@4.19.2_yaml@2.7.0/node_modules/vite/dist/node/module-runner.js:1049:5)
    at async SSRCompatModuleRunner.directRequest (file:///path-to-project/node_modules/.pnpm/vite@6.1.0_@types+node@22.13.1_jiti@2.4.2_lightningcss@1.29.1_terser@5.39.0_tsx@4.19.2_yaml@2.7.0/node_modules/vite/dist/node/module-runner.js:1271:61)
    at async SSRCompatModuleRunner.directRequest (file:///path-to-project/node_modules/.pnpm/vite@6.1.0_@types+node@22.13.1_jiti@2.4.2_lightningcss@1.29.1_terser@5.39.0_tsx@4.19.2_yaml@2.7.0/node_modules/vite/dist/node/chunks/dep-CfG9u7Cn.js:30895:23)
    at async SSRCompatModuleRunner.cachedRequest (file:///path-to-project/node_modules/.pnpm/vite@6.1.0_@types+node@22.13.1_jiti@2.4.2_lightningcss@1.29.1_terser@5.39.0_tsx@4.19.2_yaml@2.7.0/node_modules/vite/dist/node/module-runner.js:1167:76)
    at async eval (/path-to-project/node_modules/.pnpm/@solidjs+start@1.1.0_solid-js@1.9.4_vinxi@0.5.3_@types+node@22.13.1_db0@0.2.4_encoding@0.1.13_pidz6qqluodhhcgw3pqnou2kha/node_modules/@solidjs/start/dist/server/index.jsx:5:31)
    at async ESModulesEvaluator.runInlinedModule (file:///path-to-project/node_modules/.pnpm/vite@6.1.0_@types+node@22.13.1_jiti@2.4.2_lightningcss@1.29.1_terser@5.39.0_tsx@4.19.2_yaml@2.7.0/node_modules/vite/dist/node/module-runner.js:1049:5)
    at async SSRCompatModuleRunner.directRequest (file:///path-to-project/node_modules/.pnpm/vite@6.1.0_@types+node@22.13.1_jiti@2.4.2_lightningcss@1.29.1_terser@5.39.0_tsx@4.19.2_yaml@2.7.0/node_modules/vite/dist/node/module-runner.js:1271:61)
    at async SSRCompatModuleRunner.directRequest (file:///path-to-project/node_modules/.pnpm/vite@6.1.0_@types+node@22.13.1_jiti@2.4.2_lightningcss@1.29.1_terser@5.39.0_tsx@4.19.2_yaml@2.7.0/node_modules/vite/dist/node/chunks/dep-CfG9u7Cn.js:30895:23)
    at async SSRCompatModuleRunner.cachedRequest (file:///path-to-project/node_modules/.pnpm/vite@6.1.0_@types+node@22.13.1_jiti@2.4.2_lightningcss@1.29.1_terser@5.39.0_tsx@4.19.2_yaml@2.7.0/node_modules/vite/dist/node/module-runner.js:1167:76)
    at async eval (/path-to-project/packages/frontend/src/entry-server.tsx:7:142)
    at async ESModulesEvaluator.runInlinedModule (file:///path-to-project/node_modules/.pnpm/vite@6.1.0_@types+node@22.13.1_jiti@2.4.2_lightningcss@1.29.1_terser@5.39.0_tsx@4.19.2_yaml@2.7.0/node_modules/vite/dist/node/module-runner.js:1049:5)
    at async SSRCompatModuleRunner.directRequest (file:///path-to-project/node_modules/.pnpm/vite@6.1.0_@types+node@22.13.1_jiti@2.4.2_lightningcss@1.29.1_terser@5.39.0_tsx@4.19.2_yaml@2.7.0/node_modules/vite/dist/node/module-runner.js:1271:61)
    at async SSRCompatModuleRunner.directRequest (file:///path-to-project/node_modules/.pnpm/vite@6.1.0_@types+node@22.13.1_jiti@2.4.2_lightningcss@1.29.1_terser@5.39.0_tsx@4.19.2_yaml@2.7.0/node_modules/vite/dist/node/chunks/dep-CfG9u7Cn.js:30895:23)
    at async SSRCompatModuleRunner.cachedRequest (file:///path-to-project/node_modules/.pnpm/vite@6.1.0_@types+node@22.13.1_jiti@2.4.2_lightningcss@1.29.1_terser@5.39.0_tsx@4.19.2_yaml@2.7.0/node_modules/vite/dist/node/module-runner.js:1167:76)
    at async eval (virtual:$vinxi/handler/ssr:3:44)
    at async ESModulesEvaluator.runInlinedModule (file:///path-to-project/node_modules/.pnpm/vite@6.1.0_@types+node@22.13.1_jiti@2.4.2_lightningcss@1.29.1_terser@5.39.0_tsx@4.19.2_yaml@2.7.0/node_modules/vite/dist/node/module-runner.js:1049:5)
    at async SSRCompatModuleRunner.directRequest (file:///path-to-project/node_modules/.pnpm/vite@6.1.0_@types+node@22.13.1_jiti@2.4.2_lightningcss@1.29.1_terser@5.39.0_tsx@4.19.2_yaml@2.7.0/node_modules/vite/dist/node/module-runner.js:1271:61)
    at async SSRCompatModuleRunner.directRequest (file:///path-to-project/node_modules/.pnpm/vite@6.1.0_@types+node@22.13.1_jiti@2.4.2_lightningcss@1.29.1_terser@5.39.0_tsx@4.19.2_yaml@2.7.0/node_modules/vite/dist/node/chunks/dep-CfG9u7Cn.js:30895:23)
    at async SSRCompatModuleRunner.cachedRequest (file:///path-to-project/node_modules/.pnpm/vite@6.1.0_@types+node@22.13.1_jiti@2.4.2_lightningcss@1.29.1_terser@5.39.0_tsx@4.19.2_yaml@2.7.0/node_modules/vite/dist/node/module-runner.js:1167:76)
    at async SSRCompatModuleRunner.import (file:///path-to-project/node_modules/.pnpm/vite@6.1.0_@types+node@22.13.1_jiti@2.4.2_lightningcss@1.29.1_terser@5.39.0_tsx@4.19.2_yaml@2.7.0/node_modules/vite/dist/node/module-runner.js:1104:12)
    at async instantiateModule (file:///path-to-project/node_modules/.pnpm/vite@6.1.0_@types+node@22.13.1_jiti@2.4.2_lightningcss@1.29.1_terser@5.39.0_tsx@4.19.2_yaml@2.7.0/node_modules/vite/dist/node/chunks/dep-CfG9u7Cn.js:30852:12)
    at async handler (file:///path-to-project/node_modules/.pnpm/vinxi@0.5.3_@types+node@22.13.1_db0@0.2.4_encoding@0.1.13_ioredis@5.5.0_jiti@2.4.2_lightningc_glg6ibjsgsw35tltdryx6icnxa/node_modules/vinxi/lib/router-modes.js:275:36)
    at async _callHandler (file:///path-to-project/node_modules/.pnpm/h3@1.13.0/node_modules/h3/dist/index.mjs:1837:16)
    at async file:///path-to-project/node_modules/.pnpm/h3@1.13.0/node_modules/h3/dist/index.mjs:1978:19
    at async Object.callAsync (file:///path-to-project/node_modules/.pnpm/unctx@2.4.1/node_modules/unctx/dist/index.mjs:72:16)
    at async Server.toNodeHandle (file:///path-to-project/node_modules/.pnpm/h3@1.13.0/node_modules/h3/dist/index.mjs:2270:7)

Expected behavior

Works with SolidStart! 🚀

Screenshots or Videos

No response

Platform

• OS: macOS
• Browser: Chrome
• Version: 133.0.6943.127

Additional context

No response

[schiller-manuel]

needs ssr:false currently in solid start

cc @brenelz

[mrlubos]

Ran into another issue which has nothing to do with TanStack per se, but sharing here in case you have any thoughts spirit-led-software/clerk-solidjs#257

[brenelz]

Yeah SSR doesn't work with tanstack solid router. I've been trying to debug that client side error with no luck

[gregkonush]

yup, not quite clear how to add tanstack router into solid start setup as index.html is hidden. https://github.com/gregkonush/solit

[birkskyum]

@mrlubos , it might take a while before SSR is working with SolidStart.

On a positive note, SSR is now working for the @tanstack/solid-router on this experimental branch of TanStack Start:

• SolidJS driver for TanStack Start #3522

[mrlubos]

@birkskyum No problem, appreciate the update! As for the other issue I linked, I'm not sure what the solution would be for libraries needing to implement the "current router" navigation/components short of having a separate release/export for each. I'm slowly reducing my dependency on that package in the meantime in hopes of having an easier migration experience whenever this is ready!

[birkskyum]

closed by

• feat: add ssr for tanstack router solidjs/solid-start#1840

SSR Example here

• https://github.com/solidjs/solid-start/tree/main/examples/with-tanstack-router

[mrlubos]

@birkskyum "it might take a while" = 6 days later. Amazing!