Open
Conversation
Contributor
📝 WalkthroughWalkthroughAdds two new example applications for TanStack Router with Rspack bundler and Tauri integration: file-based and lazy-based routing variants, each with complete React, Tauri, TypeScript, and styling configurations. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~15 minutes Possibly related PRs
Suggested labels
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 10
🧹 Nitpick comments (3)
examples/react/quickstart-rspack-lazy-based-tauri/src/routes/about.tsx (1)
1-14: Unused React import.
import * as React from 'react'is not used since React 17+ with thereact-jsxruntime (tsconfig has"jsx": "react-jsx"). Safe to drop, though harmless.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@examples/react/quickstart-rspack-lazy-based-tauri/src/routes/about.tsx` around lines 1 - 14, Remove the unused React namespace import: delete the line `import * as React from 'react'` at the top of the file since the file only uses JSX with the react-jsx runtime; keep the `createLazyRoute` import and the exported `Route` and `AboutComponent` as-is (references: createLazyRoute, Route, AboutComponent) and ensure your tsconfig remains set to `"jsx": "react-jsx"`.examples/react/quickstart-rspack-file-based-tauri/src/styles.css (1)
16-21: Minor inconsistency between*border color and base layer.Line 9 sets base
border-colorto--color-gray-200for light mode, while line 17 appliesborder-gray-200 dark:border-gray-800globally via@apply. The global* {@apply... }will override the@layer baserule due to specificity/cascade order, making the@layer basedeclaration effectively dead code. Consider removing one of them to avoid confusion.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@examples/react/quickstart-rspack-file-based-tauri/src/styles.css` around lines 16 - 21, The global rule using the universal selector (*) with "@apply border-gray-200 dark:border-gray-800" conflicts with the base layer border-color and effectively overrides it; fix by removing the redundant global application or moving the border style into the existing "@layer base" so only one source sets the default border color (adjust the "*" rule or the "@layer base" entry accordingly), and update selectors (the "*" rule or the "body/@layer base" declaration) so there is a single authoritative declaration for border colors.examples/react/quickstart-rspack-lazy-based-tauri/src/routes/__root.tsx (1)
1-35: Unused React import + empty spacer div.
- Line 1:
import * as React from 'react'is unused under thereact-jsxruntime.- Line 11:
<div className="p-20"></div>is an empty spacer; consider replacing with padding on the parent or a semantic element. Minor only.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@examples/react/quickstart-rspack-lazy-based-tauri/src/routes/__root.tsx` around lines 1 - 35, Remove the unused React import and eliminate or replace the empty spacer div in RootComponent: delete the `import * as React from 'react'` line (JSX runtime is `react-jsx`), and in the `RootComponent` either remove `<div className="p-20"></div>` or move its spacing into a meaningful container (e.g., apply `p-20` to the parent wrapper or a semantic element like a header) so the layout spacing is preserved without an empty element.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@examples/react/quickstart-rspack-file-based-tauri/package.json`:
- Line 12: Update the internal dependencies in package.json to use the workspace
protocol so the example consumes the local packages: replace the version string
for "@tanstack/react-router" with "workspace:*" and do the same for
"@tanstack/router-plugin" so they point to the monorepo workspace versions
instead of the published semver ranges.
In `@examples/react/quickstart-rspack-file-based-tauri/README.md`:
- Around line 48-57: Clarify the Tauri routing note by fixing the example URL to
a complete, non-truncated form (e.g., use
"http://tauri.localhost/lazy-compilation-using-react" or similar) and make the
rsbuild.config.ts snippet copy-pasteable by adding the missing imports for
defineConfig and pluginReact (reference the config block using defineConfig({
plugins: [pluginReact()], dev: { lazyCompilation: false } }) and ensure imports
for defineConfig and pluginReact appear above it).
In `@examples/react/quickstart-rspack-file-based-tauri/src/routes/__root.tsx`:
- Around line 11-12: Remove the leftover placeholder markup from the root layout
by deleting the empty spacer div and the label div—specifically remove the JSX
elements <div className="p-20"></div> and <div>@tanstack/router-plugin</div> in
__root.tsx so the returned JSX matches the canonical quickstart layout; if
spacing is needed, replace the spacer with semantic layout (e.g., padding via a
container) rather than an empty div.
In `@examples/react/quickstart-rspack-file-based-tauri/src/vite-env.d.ts`:
- Line 1: Delete the redundant vite-env.d.ts file (which contains only "///
<reference types='vite/client' />") because the project uses Rspack and env.d.ts
already provides the correct `@rsbuild/core/types`; remove vite-env.d.ts so
TypeScript strict mode no longer fails on the missing vite/client types and rely
on env.d.ts for global type references.
In `@examples/react/quickstart-rspack-lazy-based-tauri/package.json`:
- Around line 9-10: Add the missing devDependency "@tauri-apps/cli" (e.g.
"^2.10.1") to package.json's devDependencies so the "tauri" script ("tauri":
"tauri") can resolve the local binary; update the devDependencies block (where
other dev deps live) to include "@tauri-apps/cli": "^2.10.1" and run install to
validate pnpm tauri dev/build works.
- Around line 11-15: Replace the external version spec for the internal monorepo
package "@tanstack/react-router" with the workspace protocol so the example
tracks the in-tree package (e.g. change the dependency value for
"@tanstack/react-router" from "^1.168.23" to "workspace:^1.168.23" or simply
"workspace:*" depending on whether you want caret semantics); update the
"dependencies" entry for "@tanstack/react-router" accordingly so it consumes the
workspace package instead of the published version.
In `@examples/react/quickstart-rspack-lazy-based-tauri/README.md`:
- Around line 1-45: Replace the confusing phrase "lazy-based-tauri routing" used
in the README (titles and descriptive bullets) with "lazy-based routing" and
mention Tauri separately where relevant (e.g., "for Tauri apps" or "with Tauri")
so it reads like "A quickstart example using Rspack as the bundler with
lazy-based routing for Tauri" and update the other occurrence on line 43
similarly; search for the exact token "lazy-based-tauri" and update its usage in
the title and About This Example list to separate routing mode (lazy-based
routing) from the Tauri platform.
In `@examples/react/quickstart-rspack-lazy-based-tauri/src-tauri/tauri.conf.json`:
- Line 5: Replace the generic identifier value in tauri.conf.json ("identifier":
"com.tauri.dev") with a unique reverse-DNS string for this app (e.g.,
"com.tanstack.router.example.rspack-lazy-based-tauri"); locate the "identifier"
key in the tauri.conf.json manifest and update its value to a project-specific
reverse-DNS identifier to avoid conflicts and bundler rejections.
- Around line 9-10: Update the tauri configuration keys beforeDevCommand and
beforeBuildCommand to call pnpm instead of bun: replace "bun dev" with "pnpm
dev" and "bun build" with "pnpm build" in the tauri.conf.json files used by the
React Rspack tauri examples (both file-based and lazy-based) so the commands
invoke the repo's npm scripts as documented.
In `@examples/react/quickstart-rspack-lazy-based-tauri/src/vite-env.d.ts`:
- Line 1: Remove the Vite-specific ambient triple-slash reference from
vite-env.d.ts: delete the line "/// <reference types=\"vite/client\" />" so the
example relies on the existing env.d.ts/@rsbuild/core/types ambient
declarations; ensure no other Vite-only references remain in vite-env.d.ts and
that TypeScript strict mode compiles without that vite/client reference.
---
Nitpick comments:
In `@examples/react/quickstart-rspack-file-based-tauri/src/styles.css`:
- Around line 16-21: The global rule using the universal selector (*) with
"@apply border-gray-200 dark:border-gray-800" conflicts with the base layer
border-color and effectively overrides it; fix by removing the redundant global
application or moving the border style into the existing "@layer base" so only
one source sets the default border color (adjust the "*" rule or the "@layer
base" entry accordingly), and update selectors (the "*" rule or the "body/@layer
base" declaration) so there is a single authoritative declaration for border
colors.
In `@examples/react/quickstart-rspack-lazy-based-tauri/src/routes/__root.tsx`:
- Around line 1-35: Remove the unused React import and eliminate or replace the
empty spacer div in RootComponent: delete the `import * as React from 'react'`
line (JSX runtime is `react-jsx`), and in the `RootComponent` either remove
`<div className="p-20"></div>` or move its spacing into a meaningful container
(e.g., apply `p-20` to the parent wrapper or a semantic element like a header)
so the layout spacing is preserved without an empty element.
In `@examples/react/quickstart-rspack-lazy-based-tauri/src/routes/about.tsx`:
- Around line 1-14: Remove the unused React namespace import: delete the line
`import * as React from 'react'` at the top of the file since the file only uses
JSX with the react-jsx runtime; keep the `createLazyRoute` import and the
exported `Route` and `AboutComponent` as-is (references: createLazyRoute, Route,
AboutComponent) and ensure your tsconfig remains set to `"jsx": "react-jsx"`.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 6a75d5fa-61aa-4803-aa89-e11b97487eaf
⛔ Files ignored due to path filters (32)
examples/react/quickstart-rspack-file-based-tauri/src-tauri/Cargo.lockis excluded by!**/*.lockexamples/react/quickstart-rspack-file-based-tauri/src-tauri/icons/128x128.pngis excluded by!**/*.pngexamples/react/quickstart-rspack-file-based-tauri/src-tauri/icons/128x128@2x.pngis excluded by!**/*.pngexamples/react/quickstart-rspack-file-based-tauri/src-tauri/icons/32x32.pngis excluded by!**/*.pngexamples/react/quickstart-rspack-file-based-tauri/src-tauri/icons/Square107x107Logo.pngis excluded by!**/*.pngexamples/react/quickstart-rspack-file-based-tauri/src-tauri/icons/Square142x142Logo.pngis excluded by!**/*.pngexamples/react/quickstart-rspack-file-based-tauri/src-tauri/icons/Square150x150Logo.pngis excluded by!**/*.pngexamples/react/quickstart-rspack-file-based-tauri/src-tauri/icons/Square284x284Logo.pngis excluded by!**/*.pngexamples/react/quickstart-rspack-file-based-tauri/src-tauri/icons/Square30x30Logo.pngis excluded by!**/*.pngexamples/react/quickstart-rspack-file-based-tauri/src-tauri/icons/Square310x310Logo.pngis excluded by!**/*.pngexamples/react/quickstart-rspack-file-based-tauri/src-tauri/icons/Square44x44Logo.pngis excluded by!**/*.pngexamples/react/quickstart-rspack-file-based-tauri/src-tauri/icons/Square71x71Logo.pngis excluded by!**/*.pngexamples/react/quickstart-rspack-file-based-tauri/src-tauri/icons/Square89x89Logo.pngis excluded by!**/*.pngexamples/react/quickstart-rspack-file-based-tauri/src-tauri/icons/StoreLogo.pngis excluded by!**/*.pngexamples/react/quickstart-rspack-file-based-tauri/src-tauri/icons/icon.icois excluded by!**/*.icoexamples/react/quickstart-rspack-file-based-tauri/src-tauri/icons/icon.pngis excluded by!**/*.pngexamples/react/quickstart-rspack-lazy-based-tauri/src-tauri/Cargo.lockis excluded by!**/*.lockexamples/react/quickstart-rspack-lazy-based-tauri/src-tauri/icons/128x128.pngis excluded by!**/*.pngexamples/react/quickstart-rspack-lazy-based-tauri/src-tauri/icons/128x128@2x.pngis excluded by!**/*.pngexamples/react/quickstart-rspack-lazy-based-tauri/src-tauri/icons/32x32.pngis excluded by!**/*.pngexamples/react/quickstart-rspack-lazy-based-tauri/src-tauri/icons/Square107x107Logo.pngis excluded by!**/*.pngexamples/react/quickstart-rspack-lazy-based-tauri/src-tauri/icons/Square142x142Logo.pngis excluded by!**/*.pngexamples/react/quickstart-rspack-lazy-based-tauri/src-tauri/icons/Square150x150Logo.pngis excluded by!**/*.pngexamples/react/quickstart-rspack-lazy-based-tauri/src-tauri/icons/Square284x284Logo.pngis excluded by!**/*.pngexamples/react/quickstart-rspack-lazy-based-tauri/src-tauri/icons/Square30x30Logo.pngis excluded by!**/*.pngexamples/react/quickstart-rspack-lazy-based-tauri/src-tauri/icons/Square310x310Logo.pngis excluded by!**/*.pngexamples/react/quickstart-rspack-lazy-based-tauri/src-tauri/icons/Square44x44Logo.pngis excluded by!**/*.pngexamples/react/quickstart-rspack-lazy-based-tauri/src-tauri/icons/Square71x71Logo.pngis excluded by!**/*.pngexamples/react/quickstart-rspack-lazy-based-tauri/src-tauri/icons/Square89x89Logo.pngis excluded by!**/*.pngexamples/react/quickstart-rspack-lazy-based-tauri/src-tauri/icons/StoreLogo.pngis excluded by!**/*.pngexamples/react/quickstart-rspack-lazy-based-tauri/src-tauri/icons/icon.icois excluded by!**/*.icoexamples/react/quickstart-rspack-lazy-based-tauri/src-tauri/icons/icon.pngis excluded by!**/*.png
📒 Files selected for processing (46)
examples/react/quickstart-rspack-file-based-tauri/.gitignoreexamples/react/quickstart-rspack-file-based-tauri/README.mdexamples/react/quickstart-rspack-file-based-tauri/package.jsonexamples/react/quickstart-rspack-file-based-tauri/postcss.config.mjsexamples/react/quickstart-rspack-file-based-tauri/rsbuild.config.tsexamples/react/quickstart-rspack-file-based-tauri/src-tauri/.gitignoreexamples/react/quickstart-rspack-file-based-tauri/src-tauri/Cargo.tomlexamples/react/quickstart-rspack-file-based-tauri/src-tauri/build.rsexamples/react/quickstart-rspack-file-based-tauri/src-tauri/capabilities/default.jsonexamples/react/quickstart-rspack-file-based-tauri/src-tauri/icons/icon.icnsexamples/react/quickstart-rspack-file-based-tauri/src-tauri/src/lib.rsexamples/react/quickstart-rspack-file-based-tauri/src-tauri/src/main.rsexamples/react/quickstart-rspack-file-based-tauri/src-tauri/tauri.conf.jsonexamples/react/quickstart-rspack-file-based-tauri/src/app.tsxexamples/react/quickstart-rspack-file-based-tauri/src/env.d.tsexamples/react/quickstart-rspack-file-based-tauri/src/index.tsxexamples/react/quickstart-rspack-file-based-tauri/src/routeTree.gen.tsexamples/react/quickstart-rspack-file-based-tauri/src/routes/__root.tsxexamples/react/quickstart-rspack-file-based-tauri/src/routes/about.tsxexamples/react/quickstart-rspack-file-based-tauri/src/routes/index.tsxexamples/react/quickstart-rspack-file-based-tauri/src/styles.cssexamples/react/quickstart-rspack-file-based-tauri/src/vite-env.d.tsexamples/react/quickstart-rspack-file-based-tauri/tsconfig.jsonexamples/react/quickstart-rspack-lazy-based-tauri/.gitignoreexamples/react/quickstart-rspack-lazy-based-tauri/README.mdexamples/react/quickstart-rspack-lazy-based-tauri/package.jsonexamples/react/quickstart-rspack-lazy-based-tauri/postcss.config.mjsexamples/react/quickstart-rspack-lazy-based-tauri/rsbuild.config.tsexamples/react/quickstart-rspack-lazy-based-tauri/src-tauri/.gitignoreexamples/react/quickstart-rspack-lazy-based-tauri/src-tauri/Cargo.tomlexamples/react/quickstart-rspack-lazy-based-tauri/src-tauri/build.rsexamples/react/quickstart-rspack-lazy-based-tauri/src-tauri/capabilities/default.jsonexamples/react/quickstart-rspack-lazy-based-tauri/src-tauri/icons/icon.icnsexamples/react/quickstart-rspack-lazy-based-tauri/src-tauri/src/lib.rsexamples/react/quickstart-rspack-lazy-based-tauri/src-tauri/src/main.rsexamples/react/quickstart-rspack-lazy-based-tauri/src-tauri/tauri.conf.jsonexamples/react/quickstart-rspack-lazy-based-tauri/src/app.tsxexamples/react/quickstart-rspack-lazy-based-tauri/src/env.d.tsexamples/react/quickstart-rspack-lazy-based-tauri/src/index.tsxexamples/react/quickstart-rspack-lazy-based-tauri/src/router-tree.tsxexamples/react/quickstart-rspack-lazy-based-tauri/src/routes/__root.tsxexamples/react/quickstart-rspack-lazy-based-tauri/src/routes/about.tsxexamples/react/quickstart-rspack-lazy-based-tauri/src/routes/index.tsxexamples/react/quickstart-rspack-lazy-based-tauri/src/styles.cssexamples/react/quickstart-rspack-lazy-based-tauri/src/vite-env.d.tsexamples/react/quickstart-rspack-lazy-based-tauri/tsconfig.json
| "tauri": "tauri" | ||
| }, | ||
| "dependencies": { | ||
| "@tanstack/react-router": "^1.168.23", |
Contributor
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Use the workspace protocol for the internal @tanstack/react-router dependency.
This example lives inside the monorepo and should consume the local package via the workspace protocol so it always builds against the current source rather than the last published range.
♻️ Proposed fix
- "@tanstack/react-router": "^1.168.23",
+ "@tanstack/react-router": "workspace:^",The same applies to "@tanstack/router-plugin" on line 20.
Based on learnings: "Applies to package.json : Use workspace protocol for internal dependencies (workspace:*)".
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| "@tanstack/react-router": "^1.168.23", | |
| "@tanstack/react-router": "workspace:^", |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@examples/react/quickstart-rspack-file-based-tauri/package.json` at line 12,
Update the internal dependencies in package.json to use the workspace protocol
so the example consumes the local packages: replace the version string for
"@tanstack/react-router" with "workspace:*" and do the same for
"@tanstack/router-plugin" so they point to the monorepo workspace versions
instead of the published semver ranges.
Comment on lines
+48
to
+57
| **Note** If you want to build a Tauri application, you might encounter some issues with route requests. For example, after accessing a route, there might actually be a request address like `http://tauri.localhost/lazy-compilation-using-`. In this case, you need to set [`lazyCompilation`](https://rsbuild.rs/config/dev/lazy-compilation#introduction) to `false`. | ||
|
|
||
| ```ts | ||
| // rsbuild.config.ts | ||
| export default defineConfig({ | ||
| plugins: [pluginReact()], | ||
| dev: { | ||
| lazyCompilation: false, | ||
| }, | ||
| }) |
Contributor
There was a problem hiding this comment.
Clarify the Tauri routing note and make the config snippet copy-pasteable.
The example URL in the note appears truncated/confusing, and the snippet omits imports for defineConfig/pluginReact.
✏️ Suggested README tweak
-**Note** If you want to build a Tauri application, you might encounter some issues with route requests. For example, after accessing a route, there might actually be a request address like `http://tauri.localhost/lazy-compilation-using-`. In this case, you need to set [`lazyCompilation`](https://rsbuild.rs/config/dev/lazy-compilation#introduction) to `false`.
+**Note:** When running under Tauri, route navigation can trigger unexpected dev-only lazy-compilation requests. If that happens, disable [`lazyCompilation`](https://rsbuild.rs/config/dev/lazy-compilation#introduction).
```ts
// rsbuild.config.ts
+import { defineConfig } from '@rsbuild/core'
+import { pluginReact } from '@rsbuild/plugin-react'
+
export default defineConfig({
plugins: [pluginReact()],
dev: {
lazyCompilation: false,
},
})</details>
<details>
<summary>🤖 Prompt for AI Agents</summary>
Verify each finding against the current code and only fix it if needed.
In @examples/react/quickstart-rspack-file-based-tauri/README.md around lines 48
- 57, Clarify the Tauri routing note by fixing the example URL to a complete,
non-truncated form (e.g., use
"http://tauri.localhost/lazy-compilation-using-react" or similar) and make the
rsbuild.config.ts snippet copy-pasteable by adding the missing imports for
defineConfig and pluginReact (reference the config block using defineConfig({
plugins: [pluginReact()], dev: { lazyCompilation: false } }) and ensure imports
for defineConfig and pluginReact appear above it).
</details>
<!-- fingerprinting:phantom:triton:hawk:70e00f6b-2039-4f51-8c55-919980caaa04 -->
<!-- This is an auto-generated comment by CodeRabbit -->
Comment on lines
+11
to
+12
| <div className="p-20"></div> | ||
| <div>@tanstack/router-plugin</div> |
Contributor
There was a problem hiding this comment.
Minor: stray placeholder markup in the root layout.
<div className="p-20"></div> (an empty spacer) and <div>@tanstack/router-plugin</div> (a label rather than UI) look like leftover scaffolding rather than something a quickstart should ship as the canonical example. Consider removing them so the example mirrors the existing quickstart-rspack-file-based example more closely.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@examples/react/quickstart-rspack-file-based-tauri/src/routes/__root.tsx`
around lines 11 - 12, Remove the leftover placeholder markup from the root
layout by deleting the empty spacer div and the label div—specifically remove
the JSX elements <div className="p-20"></div> and
<div>@tanstack/router-plugin</div> in __root.tsx so the returned JSX matches the
canonical quickstart layout; if spacing is needed, replace the spacer with
semantic layout (e.g., padding via a container) rather than an empty div.
| @@ -0,0 +1 @@ | |||
| /// <reference types="vite/client" /> | |||
Contributor
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Description: Check if Vite is a dependency and if vite/client types are used elsewhere
# Check for Vite in package.json
fd -t f "^package.json$" examples/react/quickstart-rspack-file-based-tauri | xargs cat | jq '.dependencies, .devDependencies'
# Search for other references to vite/client or similar Vite types
rg -n "vite/client|vite-env" examples/react/quickstart-rspack-file-based-tauri --type tsRepository: TanStack/router
Length of output: 554
🏁 Script executed:
# Find all env.d.ts or similar environment type definition files
fd -t f "env\.d\.ts|vite-env\.d\.ts" examples/react/quickstart-rspack-file-based-tauri
# Check the full context of the vite-env.d.ts file
cat -n examples/react/quickstart-rspack-file-based-tauri/src/vite-env.d.ts
# Search for `@rsbuild` references in tsconfig or other config files
fd -t f "tsconfig|rsbuild" examples/react/quickstart-rspack-file-based-tauri | xargs cat 2>/dev/null | head -50Repository: TanStack/router
Length of output: 963
🏁 Script executed:
# Check the contents of env.d.ts to see if it has proper Rsbuild types
cat -n examples/react/quickstart-rspack-file-based-tauri/src/env.d.ts
# Check if there are any actual imports or usage of vite types in the project
rg "vite" examples/react/quickstart-rspack-file-based-tauri/src --type ts --type tsxRepository: TanStack/router
Length of output: 156
Remove vite-env.d.ts — it's redundant and causes issues.
The file references vite/client which is not a project dependency. The proper Rsbuild types are already provided by env.d.ts in the same directory, which correctly references @rsbuild/core/types. With strict: true in tsconfig.json, the missing vite/client reference will cause TypeScript compilation errors.
Delete vite-env.d.ts since env.d.ts serves the same purpose for this Rspack-based project.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@examples/react/quickstart-rspack-file-based-tauri/src/vite-env.d.ts` at line
1, Delete the redundant vite-env.d.ts file (which contains only "/// <reference
types='vite/client' />") because the project uses Rspack and env.d.ts already
provides the correct `@rsbuild/core/types`; remove vite-env.d.ts so TypeScript
strict mode no longer fails on the missing vite/client types and rely on
env.d.ts for global type references.
Comment on lines
+9
to
+10
| "tauri": "tauri" | ||
| }, |
Contributor
There was a problem hiding this comment.
Missing @tauri-apps/cli devDependency — the tauri script will fail.
The "tauri": "tauri" script (Line 9) requires the @tauri-apps/cli package to be installed locally, but it is absent from devDependencies. The sibling file-based example correctly declares "@tauri-apps/cli": "^2.10.1". Without it, pnpm tauri dev / pnpm tauri build will not resolve a binary.
🛡️ Proposed fix
"devDependencies": {
"@rsbuild/core": "^1.2.4",
"@rsbuild/plugin-react": "^1.1.0",
"@tailwindcss/postcss": "^4.1.18",
+ "@tauri-apps/cli": "^2.10.1",
"@types/react": "^19.2.7",
"@types/react-dom": "^19.2.3",
"tailwindcss": "^4.1.18",
"typescript": "^5.9.3"
}Also applies to: 16-24
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@examples/react/quickstart-rspack-lazy-based-tauri/package.json` around lines
9 - 10, Add the missing devDependency "@tauri-apps/cli" (e.g. "^2.10.1") to
package.json's devDependencies so the "tauri" script ("tauri": "tauri") can
resolve the local binary; update the devDependencies block (where other dev deps
live) to include "@tauri-apps/cli": "^2.10.1" and run install to validate pnpm
tauri dev/build works.
Comment on lines
+11
to
+15
| "dependencies": { | ||
| "@tanstack/react-router": "^1.168.23", | ||
| "react": "^19.2.3", | ||
| "react-dom": "^19.2.3" | ||
| }, |
Contributor
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Use the workspace protocol for @tanstack/react-router.
Same as in the file-based variant — internal monorepo packages should be consumed via workspace:*/workspace:^ so the example tracks the in-tree source.
♻️ Proposed fix
- "@tanstack/react-router": "^1.168.23",
+ "@tanstack/react-router": "workspace:^",Based on learnings: "Applies to package.json : Use workspace protocol for internal dependencies (workspace:*)".
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| "dependencies": { | |
| "@tanstack/react-router": "^1.168.23", | |
| "react": "^19.2.3", | |
| "react-dom": "^19.2.3" | |
| }, | |
| "dependencies": { | |
| "@tanstack/react-router": "workspace:^", | |
| "react": "^19.2.3", | |
| "react-dom": "^19.2.3" | |
| }, |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@examples/react/quickstart-rspack-lazy-based-tauri/package.json` around lines
11 - 15, Replace the external version spec for the internal monorepo package
"@tanstack/react-router" with the workspace protocol so the example tracks the
in-tree package (e.g. change the dependency value for "@tanstack/react-router"
from "^1.168.23" to "workspace:^1.168.23" or simply "workspace:*" depending on
whether you want caret semantics); update the "dependencies" entry for
"@tanstack/react-router" accordingly so it consumes the workspace package
instead of the published version.
Comment on lines
+1
to
+45
| # TanStack Router - Rspack Lazy-Based-Tauri Quickstart | ||
|
|
||
| A quickstart example using Rspack as the bundler with lazy-based-tauri routing. | ||
|
|
||
| - [TanStack Router Docs](https://tanstack.com/router) | ||
| - [Rspack Documentation](https://www.rspack.dev/) | ||
|
|
||
| ## Start a new project based on this example | ||
|
|
||
| To start a new project based on this example, run: | ||
|
|
||
| ```sh | ||
| npx gitpick TanStack/router/tree/main/examples/react/quickstart-rspack-lazy-based-tauri quickstart-rspack-lazy-based-tauri | ||
| ``` | ||
|
|
||
| ## Getting Started | ||
|
|
||
| Install dependencies: | ||
|
|
||
| ```sh | ||
| pnpm install | ||
| ``` | ||
|
|
||
| Start the development server: | ||
|
|
||
| ```sh | ||
| pnpm dev | ||
| ``` | ||
|
|
||
| ## Build | ||
|
|
||
| Build for production: | ||
|
|
||
| ```sh | ||
| pnpm build | ||
| ``` | ||
|
|
||
| ## About This Example | ||
|
|
||
| This example demonstrates: | ||
|
|
||
| - Rspack bundler integration | ||
| - lazy-based-tauri routing | ||
| - Fast build times with Rust-based tooling | ||
| - Webpack-compatible configuration |
Contributor
There was a problem hiding this comment.
Wording: "lazy-based-tauri routing" is confusing.
The phrase should likely be "lazy-based routing" (with Tauri being a separate concern — the bundler/desktop shell, not a routing mode). Same issue on line 43. Consider:
📝 Proposed wording fix
-A quickstart example using Rspack as the bundler with lazy-based-tauri routing.
+A quickstart example using Rspack as the bundler with lazy-based routing, packaged as a Tauri desktop app.
@@
-- lazy-based-tauri routing
+- Lazy-based routing
+- Tauri desktop integration📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| # TanStack Router - Rspack Lazy-Based-Tauri Quickstart | |
| A quickstart example using Rspack as the bundler with lazy-based-tauri routing. | |
| - [TanStack Router Docs](https://tanstack.com/router) | |
| - [Rspack Documentation](https://www.rspack.dev/) | |
| ## Start a new project based on this example | |
| To start a new project based on this example, run: | |
| ```sh | |
| npx gitpick TanStack/router/tree/main/examples/react/quickstart-rspack-lazy-based-tauri quickstart-rspack-lazy-based-tauri | |
| ``` | |
| ## Getting Started | |
| Install dependencies: | |
| ```sh | |
| pnpm install | |
| ``` | |
| Start the development server: | |
| ```sh | |
| pnpm dev | |
| ``` | |
| ## Build | |
| Build for production: | |
| ```sh | |
| pnpm build | |
| ``` | |
| ## About This Example | |
| This example demonstrates: | |
| - Rspack bundler integration | |
| - lazy-based-tauri routing | |
| - Fast build times with Rust-based tooling | |
| - Webpack-compatible configuration | |
| # TanStack Router - Rspack Lazy-Based-Tauri Quickstart | |
| A quickstart example using Rspack as the bundler with lazy-based routing, packaged as a Tauri desktop app. | |
| - [TanStack Router Docs](https://tanstack.com/router) | |
| - [Rspack Documentation](https://www.rspack.dev/) | |
| ## Start a new project based on this example | |
| To start a new project based on this example, run: | |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@examples/react/quickstart-rspack-lazy-based-tauri/README.md` around lines 1 -
45, Replace the confusing phrase "lazy-based-tauri routing" used in the README
(titles and descriptive bullets) with "lazy-based routing" and mention Tauri
separately where relevant (e.g., "for Tauri apps" or "with Tauri") so it reads
like "A quickstart example using Rspack as the bundler with lazy-based routing
for Tauri" and update the other occurrence on line 43 similarly; search for the
exact token "lazy-based-tauri" and update its usage in the title and About This
Example list to separate routing mode (lazy-based routing) from the Tauri
platform.
| "$schema": "../node_modules/@tauri-apps/cli/config.schema.json", | ||
| "productName": "tanstack-router-react-example-quickstart-rspack-lazy-based-tauri", | ||
| "version": "0.1.0", | ||
| "identifier": "com.tauri.dev", |
Contributor
There was a problem hiding this comment.
Generic identifier "com.tauri.dev".
Tauri recommends a unique reverse-DNS identifier per app, and using com.tauri.dev (reserved-looking default) can clash with other example apps installed on the same machine and may be rejected by Tauri's bundler in some configurations. Consider something like com.tanstack.router.example.rspack-lazy-based-tauri.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@examples/react/quickstart-rspack-lazy-based-tauri/src-tauri/tauri.conf.json`
at line 5, Replace the generic identifier value in tauri.conf.json
("identifier": "com.tauri.dev") with a unique reverse-DNS string for this app
(e.g., "com.tanstack.router.example.rspack-lazy-based-tauri"); locate the
"identifier" key in the tauri.conf.json manifest and update its value to a
project-specific reverse-DNS identifier to avoid conflicts and bundler
rejections.
Comment on lines
+9
to
+10
| "beforeDevCommand": "bun dev", | ||
| "beforeBuildCommand": "bun build" |
Contributor
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
fd -t f 'tauri.conf.json' examples/react/quickstart-rspack-file-based-tauri examples/react/quickstart-rspack-lazy-based-tauri --exec cat {}
echo "---"
fd -t f 'package.json' examples/react/quickstart-rspack-file-based-tauri examples/react/quickstart-rspack-lazy-based-tauri -d 2 --exec cat {}Repository: TanStack/router
Length of output: 3186
🏁 Script executed:
fd -t f 'README' examples/react/quickstart-rspack-file-based-tauri examples/react/quickstart-rspack-lazy-based-tauriRepository: TanStack/router
Length of output: 178
🏁 Script executed:
fd -t f 'README' examples/react/quickstart-rspack* -d 3Repository: TanStack/router
Length of output: 232
🏁 Script executed:
cat examples/react/quickstart-rspack-file-based-tauri/README.mdRepository: TanStack/router
Length of output: 1391
🏁 Script executed:
cat examples/react/quickstart-rspack-lazy-based-tauri/README.mdRepository: TanStack/router
Length of output: 1391
Change beforeDevCommand/beforeBuildCommand to use pnpm instead of bun in both tauri examples.
Both examples/react/quickstart-rspack-file-based-tauri/src-tauri/tauri.conf.json and examples/react/quickstart-rspack-lazy-based-tauri/src-tauri/tauri.conf.json are configured with bun dev and bun build, but the README and npm scripts in both examples document and define pnpm dev and pnpm build. Users following the documentation will be unable to run pnpm tauri dev without Bun installed, and bun dev/bun build won't invoke the npm scripts as intended.
🔧 Proposed fix
- "beforeDevCommand": "bun dev",
- "beforeBuildCommand": "bun build"
+ "beforeDevCommand": "pnpm dev",
+ "beforeBuildCommand": "pnpm build"Apply this fix to both examples/react/quickstart-rspack-file-based-tauri/src-tauri/tauri.conf.json and examples/react/quickstart-rspack-lazy-based-tauri/src-tauri/tauri.conf.json.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| "beforeDevCommand": "bun dev", | |
| "beforeBuildCommand": "bun build" | |
| "beforeDevCommand": "pnpm dev", | |
| "beforeBuildCommand": "pnpm build" |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@examples/react/quickstart-rspack-lazy-based-tauri/src-tauri/tauri.conf.json`
around lines 9 - 10, Update the tauri configuration keys beforeDevCommand and
beforeBuildCommand to call pnpm instead of bun: replace "bun dev" with "pnpm
dev" and "bun build" with "pnpm build" in the tauri.conf.json files used by the
React Rspack tauri examples (both file-based and lazy-based) so the commands
invoke the repo's npm scripts as documented.
| @@ -0,0 +1 @@ | |||
| /// <reference types="vite/client" /> | |||
Contributor
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
example_dir='examples/react/quickstart-rspack-lazy-based-tauri'
echo 'Type references in src:'
rg -n '///\s*<reference\s+types=' "$example_dir/src" || true
echo
echo 'Direct Vite dependencies in package.json:'
jq -r '(.dependencies // {}) + (.devDependencies // {}) | keys[]' "$example_dir/package.json" \
| grep -E '^(vite|@vitejs/)' || trueRepository: TanStack/router
Length of output: 344
🏁 Script executed:
#!/bin/bash
set -euo pipefail
example_dir='examples/react/quickstart-rspack-lazy-based-tauri'
echo "=== Checking TypeScript config ==="
if [ -f "$example_dir/tsconfig.json" ]; then
cat "$example_dir/tsconfig.json"
else
echo "No tsconfig.json found in example"
fi
echo ""
echo "=== Checking both .d.ts files ==="
echo "--- vite-env.d.ts ---"
cat "$example_dir/src/vite-env.d.ts"
echo ""
echo "--- env.d.ts ---"
cat "$example_dir/src/env.d.ts"
echo ""
echo "=== Checking for root tsconfig ==="
if [ -f "tsconfig.json" ]; then
echo "Root tsconfig.json has strict mode:"
jq '.compilerOptions.strict // "not set"' tsconfig.json
fi
echo ""
echo "=== Checking lockfile for Vite transitive dependency ==="
# Check if Vite appears anywhere in lock file
if [ -f "pnpm-lock.yaml" ]; then
echo "Searching pnpm-lock.yaml for vite entries:"
rg "^\s+vite:" pnpm-lock.yaml | head -5 || echo "No direct vite entries found"
fiRepository: TanStack/router
Length of output: 841
🏁 Script executed:
#!/bin/bash
set -euo pipefail
example_dir='examples/react/quickstart-rspack-lazy-based-tauri'
echo "=== Searching for Vite imports/usages in example source ==="
rg "import.*vite|from\s+['\"]vite" "$example_dir/src" || echo "No Vite imports found"
echo ""
echo "=== Checking for vite.config references or HMR usage ==="
rg "vite|hmr|HMR" "$example_dir/src" || echo "No vite references found"
echo ""
echo "=== Listing all TypeScript/JSX files in example/src ==="
fd -e ts -e tsx "$example_dir/src"Repository: TanStack/router
Length of output: 896
🏁 Script executed:
#!/bin/bash
set -euo pipefail
example_dir='examples/react/quickstart-rspack-lazy-based-tauri'
echo "=== Listing all TypeScript/JSX files in example/src ==="
fd -e ts -e tsx . "$example_dir/src"
echo ""
echo "=== Example file contents to check for Vite usage ==="
cd "$example_dir/src" && find . -type f \( -name "*.ts" -o -name "*.tsx" \) -exec head -20 {} \; -printRepository: TanStack/router
Length of output: 3152
Remove the Vite-only ambient type reference from this Rsbuild example.
This file is a Vite template artifact. The example uses Rsbuild/Rspack and does not import or use any Vite APIs; the existing env.d.ts with @rsbuild/core/types already provides the necessary type support. Removing this orphaned reference aligns with TypeScript strict mode compliance.
Proposed fix
-/// <reference types="vite/client" />📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| /// <reference types="vite/client" /> |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@examples/react/quickstart-rspack-lazy-based-tauri/src/vite-env.d.ts` at line
1, Remove the Vite-specific ambient triple-slash reference from vite-env.d.ts:
delete the line "/// <reference types=\"vite/client\" />" so the example relies
on the existing env.d.ts/@rsbuild/core/types ambient declarations; ensure no
other Vite-only references remain in vite-env.d.ts and that TypeScript strict
mode compiles without that vite/client reference.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary by CodeRabbit
New Features
Documentation