examples: make basic runnable with nitro #6336
Conversation
📝 WalkthroughWalkthroughUpdates two example projects (React and Solid) to integrate Nitro nightly builds by adding the nitro Vite plugin, updating package dependencies, modifying start scripts, and removing the context parameter from a handler function signature. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
Comment |
|
View your CI Pipeline Execution ↗ for commit ae46b66
☁️ Nx Cloud last updated this comment at |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Fix all issues with AI agents
In @examples/react/start-basic/package.json:
- 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.
In @examples/solid/start-basic/vite.config.ts:
- 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.
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (5)
examples/react/start-basic/package.jsonexamples/react/start-basic/src/utils/posts.tsxexamples/react/start-basic/vite.config.tsexamples/solid/start-basic/package.jsonexamples/solid/start-basic/vite.config.ts
🧰 Additional context used
📓 Path-based instructions (3)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Use TypeScript strict mode with extensive type safety for all code
Files:
examples/react/start-basic/src/utils/posts.tsxexamples/solid/start-basic/vite.config.tsexamples/react/start-basic/vite.config.ts
**/*.{js,ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Implement ESLint rules for router best practices using the ESLint plugin router
Files:
examples/react/start-basic/src/utils/posts.tsxexamples/solid/start-basic/vite.config.tsexamples/react/start-basic/vite.config.ts
**/package.json
📄 CodeRabbit inference engine (AGENTS.md)
Use workspace protocol
workspace:*for internal dependencies in package.json files
Files:
examples/react/start-basic/package.jsonexamples/solid/start-basic/package.json
🧠 Learnings (1)
📚 Learning: 2025-12-24T22:47:44.320Z
Learnt from: schiller-manuel
Repo: TanStack/router PR: 6211
File: e2e/react-start/i18n-paraglide/src/server.ts:6-6
Timestamp: 2025-12-24T22:47:44.320Z
Learning: In TanStack Router projects using `inlang/paraglide-js`, the callback passed to `paraglideMiddleware` should use `() => handler.fetch(req)` (referencing the outer `req`) instead of `({ request }) => handler.fetch(request)`. This is intentional because the router needs the untouched URL to perform its own rewrite logic with `deLocalizeUrl`/`localizeUrl`. The middleware's processed request would delocalize the URL and interfere with the router's rewrite handling.
Applied to files:
examples/react/start-basic/src/utils/posts.tsx
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: Preview
- GitHub Check: Test
🔇 Additional comments (4)
examples/solid/start-basic/package.json (2)
10-10: LGTM!The start script correctly points to Nitro's expected output path
.output/server/index.mjs.
23-23: Workspace protocol (workspace:*) does not apply to external npm packages.The
"nitro": "npm:nitro-nightly@latest"dependency uses an npm alias for an external package, not an internal workspace package. The workspace protocol rule applies only to internal dependencies (those referenced asworkspace:*). Additionally, nitro is a devDependency (build tool) used consistently across all TanStack Start examples, suggesting this is intentional for framework compatibility.Likely an incorrect or invalid review comment.
examples/react/start-basic/src/utils/posts.tsx (1)
12-12: No context parameter found in current handler signature.The handler currently uses only the
dataparameter from the inputValidator (async ({ data })), and nocontextparameter is present. The code is functionally correct:datais properly received and used on line 13. BothfetchPostusages in the codebase correctly pass the data parameter, and the alternativefetchPostshandler demonstrates the createServerFn API accepts flexible parameter patterns.Likely an incorrect or invalid review comment.
examples/react/start-basic/vite.config.ts (1)
6-6: Clarify Nitro plugin placement with explicit enforce/apply properties.Plugin order matters in Vite, but relying on array position is implicit. Verify that the Nitro plugin uses explicit
enforceandapplyproperties to control placement relative to Vite's core plugins, rather than depending on array order. Test both dev (serve) and build flows.
| "@types/react": "^19.0.8", | ||
| "@types/react-dom": "^19.0.3", | ||
| "@vitejs/plugin-react": "^4.6.0", | ||
| "nitro": "npm:nitro-nightly@latest", |
There was a problem hiding this comment.
🧩 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 -20Repository: 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.jsonRepository: 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 -20Repository: 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.
| import { tanstackStart } from '@tanstack/solid-start/plugin/vite' | ||
| import viteSolid from 'vite-plugin-solid' | ||
| import tailwindcss from '@tailwindcss/vite' | ||
| import { nitro } from 'nitro/vite' |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
cat -n examples/solid/start-basic/vite.config.tsRepository: 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.
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.