Chapter 9: With Rspack

Core Idea

File-based routing under Rspack or Rsbuild uses the same @tanstack/router-plugin package, added through tools.rspack.plugins in rsbuild.config.ts (React uses pluginReact; Solid needs pluginBabel targeting .jsx/.tsx alongside pluginSolid), with identical defaults and ignore-file guidance as the Vite integration.

Key Concepts

• @tanstack/router-plugin/rspack: The Rspack-specific entry point for the tanstackRouter plugin function.
• Rsbuild config shape: The plugin is registered under tools.rspack.plugins, separate from the top-level plugins array used for pluginReact/pluginSolid.
• Solid + Babel requirement: Solid's JSX needs pluginBabel({ include: /\.(?:jsx|tsx)$/ }) combined with pluginSolid(), since SWC (Rspack's default) doesn't support Solid's compiler transform.
• Same defaults as Vite: routesDirectory: "./src/routes", generatedRouteTree: "./src/routeTree.gen.ts", routeFileIgnorePrefix: "-", quoteStyle: "single".
• Same ignore-file guidance: routeTree.gen.ts should be excluded from Prettier/ESLint/Biome and marked readonly/excluded in VSCode, exactly as with the Vite setup.

Code Examples

// rsbuild.config.ts
import { defineConfig } from '@rsbuild/core'
import { pluginReact } from '@rsbuild/plugin-react'
import { tanstackRouter } from '@tanstack/router-plugin/rspack'

export default defineConfig({
  plugins: [pluginReact()],
  tools: {
    rspack: {
      plugins: [
        tanstackRouter({
          target: 'react',
          autoCodeSplitting: true,
        }),
      ],
    },
  },
})

• What it demonstrates: Registering the TanStack Router plugin inside Rsbuild's tools.rspack.plugins, distinct from the framework plugin location.

Key Takeaways

1. Rspack/Rsbuild integration is functionally identical to Vite's, only the config location (tools.rspack.plugins vs top-level plugins) differs.
2. Solid projects on Rspack require an extra Babel plugin for JSX since SWC cannot compile Solid's JSX transform.
3. Apply the same linter/formatter/VSCode ignore rules for routeTree.gen.ts as documented for Vite.

Connects To

• Ch 8: With Vite covers the equivalent setup for Vite, sharing the same underlying @tanstack/router-plugin package and defaults.
• Ch 10: With Webpack shows the plugin's third bundler target.
• Ch 12: With Router CLI is the fallback when a project uses none of the supported bundlers.