Rspack Plugin
Rspack plugin for TanStack Router with route generation and code splitting.
Installation
npm install @tanstack/router-plugin
Basic Usage
// rspack.config.js
const { TanStackRouterRspack } = require('@tanstack/router-plugin/rspack')
module.exports = {
plugins: [
TanStackRouterRspack()
]
}
Configuration Options
Same options as the Vite plugin:
Directory containing route files.Default: './src/routes'
Output path for generated route tree.Default: './src/routeTree.gen.ts'
Prefix to ignore when generating routes.Default: '-'
Enable automatic code splitting.Default: false
Code splitting configuration.
Examples
Basic Setup
// rspack.config.js
const { TanStackRouterRspack } = require('@tanstack/router-plugin/rspack')
module.exports = {
entry: './src/index.tsx',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
plugins: [
TanStackRouterRspack()
],
module: {
rules: [
{
test: /\.tsx?$/,
use: 'builtin:swc-loader',
exclude: /node_modules/
}
]
}
}
With Code Splitting
const { TanStackRouterRspack } = require('@tanstack/router-plugin/rspack')
module.exports = {
plugins: [
TanStackRouterRspack({
autoCodeSplitting: true,
codeSplittingOptions: {
defaultBehavior: [
['component'],
['loader'],
['pendingComponent', 'errorComponent']
]
}
})
],
optimization: {
splitChunks: {
chunks: 'all'
}
}
}
TypeScript Configuration
const { TanStackRouterRspack } = require('@tanstack/router-plugin/rspack')
module.exports = {
plugins: [
TanStackRouterRspack({
routesDirectory: './src/pages',
generatedRouteTree: './src/pages/routeTree.gen.ts',
quoteStyle: 'double',
semicolons: true
})
]
}
Development Mode
const { TanStackRouterRspack } = require('@tanstack/router-plugin/rspack')
module.exports = {
mode: 'development',
devtool: 'source-map',
plugins: [
TanStackRouterRspack({
codeSplittingOptions: {
addHmr: true
}
})
],
devServer: {
hot: true,
port: 3000
}
}
Production Build
const { TanStackRouterRspack } = require('@tanstack/router-plugin/rspack')
module.exports = {
mode: 'production',
plugins: [
TanStackRouterRspack({
autoCodeSplitting: true,
codeSplittingOptions: {
defaultBehavior: [
['component'],
['loader'],
['pendingComponent', 'errorComponent']
]
}
})
],
optimization: {
minimize: true,
splitChunks: {
chunks: 'all',
cacheGroups: {
routes: {
test: /[\\/]routes[\\/]/,
priority: -10
},
vendor: {
test: /[\\/]node_modules[\\/]/,
priority: -20
}
}
}
}
}
Rspack-Specific Features
Using SWC Loader
module.exports = {
plugins: [
TanStackRouterRspack()
],
module: {
rules: [
{
test: /\.tsx?$/,
use: 'builtin:swc-loader',
options: {
jsc: {
parser: {
syntax: 'typescript',
tsx: true
},
transform: {
react: {
runtime: 'automatic'
}
}
}
}
}
]
}
}
Lightning CSS
module.exports = {
plugins: [
TanStackRouterRspack()
],
experiments: {
css: true
},
module: {
rules: [
{
test: /\.css$/,
type: 'css/auto'
}
]
}
}