Skip to content

examples: make basic runnable with nitro #6336

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.

Sign up for GitHub

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

Merged
schiller-manuel merged 1 commit into from
Jan 8, 2026
Merged

examples: make basic runnable with nitro #6336

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions examples/react/start-basic/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@
"@types/react": "^19.0.8",
"@types/react-dom": "^19.0.3",
"@vitejs/plugin-react": "^4.6.0",
"nitro": "npm:nitro-nightly@latest",
Copy link
Contributor

@coderabbitai coderabbitai bot Jan 8, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🏁 Script executed:

# First, let's explore the repository structure to understand the project layout
git ls-files | grep -E "(package\.json|nitro)" | head -20

Repository: TanStack/router

Length of output: 1118

🏁 Script executed:

# Check the full content of the package.json file in question
cat examples/react/start-basic/package.json

Repository: TanStack/router

Length of output: 947

🏁 Script executed:

# Look for other package.json files to understand the workspace structure
find . -name "package.json" -type f | head -20

Repository: TanStack/router

Length of output: 1158

🌐 Web query:

latest stable version of Nitro JavaScript framework

💡 Result:

The latest stable release is nitropack (Nitro v2) v2.12.5. The v3 release is currently in alpha/beta (e.g., 3.0.1‑alpha). [1][2][3]

Sources:

  • npm: nitropack v2.12.5. [1]
  • Nitro v3 docs (alpha/beta migration notes). [2]
  • jsDelivr listing for nitro v3 alpha. [3]

Replace nitro-nightly with stable version in example project.

Using nitro-nightly@latest in example projects introduces instability risk as nightly builds can contain breaking changes or bugs. Examples are user-facing code references and should use stable versions. The latest stable release is v2.12.5 via the nitropack package (or use the stable nitro package if available).

🤖 Prompt for AI Agents 
In @examples/react/start-basic/package.json at line 27, The package.json uses an
unstable dependency mapping ("nitro": "npm:nitro-nightly@latest"); update the
"nitro" entry to point to the stable release instead (for example use "nitro":
"npm:nitropack@2.12.5" or the official stable "nitro" package at the
corresponding stable version) so the example project depends on a stable nitro
release rather than the nightly build.

"tailwindcss": "^4.1.18",
"typescript": "^5.7.2",
"vite": "^7.1.7",
Expand Down
3 changes: 1 addition & 2 deletions examples/react/start-basic/src/utils/posts.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,7 @@ export type PostType = {

export const fetchPost = createServerFn({ method: 'POST' })
.inputValidator((d: string) => d)
.handler(async ({ data, context }) => {
console.log('Request context:', context)
.handler(async ({ data }) => {
console.info(`Fetching post with id ${data}...`)
const res = await fetch(
`https://jsonplaceholder.typicode.com/posts/${data}`,
Expand Down
3 changes: 2 additions & 1 deletion examples/react/start-basic/vite.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { defineConfig } from 'vite'
import tsConfigPaths from 'vite-tsconfig-paths'
import viteReact from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

import { nitro } from 'nitro/vite'
export default defineConfig({
server: {
port: 3000,
Expand All @@ -17,5 +17,6 @@ export default defineConfig({
srcDirectory: 'src',
}),
viteReact(),
nitro(),
],
})
3 changes: 2 additions & 1 deletion examples/solid/start-basic/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
"dev": "vite dev",
"build": "vite build && tsc --noEmit",
"preview": "vite preview",
"start": "pnpx srvx --prod -s ../client dist/server/server.js"
"start": "node .output/server/index.mjs"
},
"dependencies": {
"@tanstack/solid-router": "^1.146.0",
Expand All @@ -20,6 +20,7 @@
"devDependencies": {
"@tailwindcss/vite": "^4.1.18",
"@types/node": "^22.5.4",
"nitro": "npm:nitro-nightly@latest",
"tailwindcss": "^4.1.18",
"typescript": "^5.7.2",
"vite": "^7.1.7",
Expand Down
2 changes: 2 additions & 0 deletions examples/solid/start-basic/vite.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import tsConfigPaths from 'vite-tsconfig-paths'
import { tanstackStart } from '@tanstack/solid-start/plugin/vite'
import viteSolid from 'vite-plugin-solid'
import tailwindcss from '@tailwindcss/vite'
import { nitro } from 'nitro/vite'
Copy link
Contributor

@coderabbitai coderabbitai bot Jan 8, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🏁 Script executed:

cat -n examples/solid/start-basic/vite.config.ts

Repository: TanStack/router

Length of output: 709

🌐 Web query:

Nitro Vite plugin ordering placement requirements documentation

💡 Result:

Short answer: Nitro's Vite plugin just needs to be included in your Vite config's plugins array; there is no formal, rigid "must-be-last" ordering rule in the official Nitro docs — placement is driven by your app's needs and other plugins (examples place nitro alongside or after framework plugins). See these docs/examples:

  • Nitro Vite plugin / Nitro v3 docs (usage & integration examples). [1]
  • @analogjs / vite-plugin-nitro docs (install + "add to plugins array" examples). [2]
  • Example placements in ecosystem docs (TanStack / Solid/React examples showing nitro placed with other plugins). [3]

If you want, tell me which Vite plugins/framework you use (Vue/React/Solid, SSR plugins, TanStack, etc.) and I’ll recommend the safest placement for your config and any ordering gotchas.

🌐 Web query:

TanStack Solid Start vite.config nitro plugin ordering best practices

💡 Result:

Short best-practices for Vite plugin ordering when using TanStack Solid Start + Nitro

Recommended minimal ordering (left-to-right in plugins array):

  • tsconfig paths / static tooling (vite-tsconfig-paths, tailwindcss, etc.).
  • tanstackStart() / @tanstack/solid-start plugin.
  • nitro() (or @tanstack/nitro-v2-vite-plugin when using the TanStack wrapper/workarounds).
  • vite-plugin-solid({ ssr: true }) (Solid compiler last so it sees the SSR build graph).

Why:

  • tanstackStart integrates Start’s multi-router Vite hooks and should run before Nitro so it can shape the build inputs. [1][2]
  • nitro’s vite plugin integrates Vite’s SSR environment and must come before the Solid SSR compiler so Nitro can control SSR-specific resolve/externals and environment options. The docs show nitro() placed before vite-plugin-solid(). [1][2]
  • vite-plugin-solid should be last (with ssr: true) so it compiles Solid components after other plugins (routing, nitro) have adjusted the module graph. [1][4]

Other practical tips

  • Add nitro: {} to your Vite config (Start docs/examples show this). [1][2]
  • If using TanStack’s nitro-v2 wrapper or nitro-nightly in containers, prefer the plugin recommended by TanStack and watch for Nitro v3 incompatibilities (many use v2/nightly as a practical workaround). Test builds in your target environment. [3][6]
  • If you need plugin-specific ordering (e.g., env/resolve transforms, Cloudflare or adapter plugins), place adapter-specific plugins after tanstackStart but before vite-plugin-solid, and test dev vs build (some dev-only errors appear depending on plugin order). See community issues where ordering causes SSR/dev errors. [0][3]
  • When in doubt: replicate the ordering from official examples (tanstackStart(), nitro(), vite-plugin-solid({ ssr: true })) and iterate only if you hit a concrete build/runtime error; open an issue with a minimal repro if behavior is unexpected. [1][2]

Example snippet (Vite plugins array)
import { tanstackStart } from '@tanstack/solid-start/plugin/vite'
import { nitro } from 'nitro/vite'
import viteSolid from 'vite-plugin-solid'
export default defineConfig({
plugins: [
tsConfigPaths(),
tanstackStart(),
nitro(),
viteSolid({ ssr: true }),
],
nitro: {},
})

Sources

  • TanStack Start hosting / Vite + Nitro examples. [1]
  • Solid Start defineConfig / vite option docs (router-aware Vite config). [2]
  • Community reports and Nitro v2/v3 notes (issues / Q&A referencing nitro-nightly and nitro-v2 plugin). [3][6]

References
[1] TanStack Start (Solid) Hosting / Vite + Nitro examples.
[2] Solid Start defineConfig (Vite configuration and router-aware hooks).
[3] Community Q&A / StackOverflow: nitro-nightly / nitro-v2 usage with TanStack Start.
[6] TanStack discussion about Nitro v3 compatibility and nitro-v2 workaround.

Move the Nitro plugin before vite-plugin-solid in the plugins array.

According to TanStack/Nitro best practices, the plugin order should be: static tooling → tanstackStart() → nitro() → viteSolid({ ssr: true }). Nitro must run before the Solid SSR compiler so it can control SSR-specific resolve/externals and environment options. The Solid plugin should be last in the chain to compile components after other plugins have shaped the module graph.

Correct plugin order 
plugins: [
  tailwindcss(),
  tsConfigPaths({
    projects: ['./tsconfig.json'],
  }),
  tanstackStart(),
  nitro(),
  viteSolid({ ssr: true }),
],
🤖 Prompt for AI Agents 
In @examples/solid/start-basic/vite.config.ts at line 6, The plugins array
currently runs viteSolid before the Nitro plugin; reorder the plugins so nitro()
appears before viteSolid({ ssr: true }) and after tanstackStart(), following the
required sequence (static tooling → tanstackStart() → nitro() → viteSolid({ ssr:
true)); adjust the import/use of nitro from 'nitro/vite' accordingly and ensure
tanstackStart() remains before nitro() and viteSolid is last.


export default defineConfig({
server: {
Expand All @@ -15,5 +16,6 @@ export default defineConfig({
}),
tanstackStart(),
viteSolid({ ssr: true }),
nitro(),
],
})
Loading
Loading