router-plugin

Configures TanStack Router bundler plugin for route generation and automatic code splitting.

1.4k|34|Updated Mar 7, 2024
One-click install
npx skills add https://github.com/mehdibha/dotUI --skill router-plugin-mehdibha
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: router-plugin
Source: https://github.com/mehdibha/dotUI/tree/main/.claude/skills/tanstack-router-plugin
Command: npx skills add https://github.com/mehdibha/dotUI --skill router-plugin-mehdibha

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @tanstack/router-plugin.

What problem does it solve? Setting up TanStack Router's file-based routing requires correctly configuring a bundler plugin across Vite, Webpack, Rspack, or esbuild, and mistakes like wrong plugin order or missing target framework cause route generation and code splitting to fail silently. ## Core Features & Use Cases - Multi-Bundler Setup: Provides ready-to-use configuration for Vite, Webpack, Rspack, and esbuild via the unplugin-based @tanstack/router-plugin package. - Automatic Code Splitting: Configures autoCodeSplitting with default and per-route split behaviors so route components, loaders, and error boundaries are split into lazy-loaded chunks without manual lazy route calls. - Route Generation Control: Covers routesDirectory, generatedRouteTree, file naming conventions (indexToken, routeToken, ignore prefixes), and virtual route config options. - Use Case: You are adding TanStack Router to a Vite + React project and need the plugin placed before react() in the config, autoCodeSplitting enabled, and a custom split behavior for your dashboard route. ## Quick Start Set up the TanStack Router plugin in my Vite config with React target and automatic code splitting enabled.

Frequently Asked Questions about router-plugin

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up TanStack Router plugin with Vite?▼

Install @tanstack/router-plugin as a dev dependency, then add tanstackRouter({ target: "react", autoCodeSplitting: true }) to your Vite plugins array. It must come before the react() plugin or route generation and code splitting fail silently.

How to enable automatic code splitting in TanStack Router?▼

Set autoCodeSplitting: true in the tanstackRouter plugin options. The plugin then splits route files into lazy-loaded chunks at build time, so you write normal route files without manual createLazyRoute or lazyRouteComponent calls.

Does TanStack Router plugin work with Webpack, Rspack, and esbuild?▼

Yes, the plugin supports Webpack, Rspack, and esbuild in addition to Vite via dedicated entry points like @tanstack/router-plugin/webpack. Each bundler config follows the same options pattern with target and autoCodeSplitting.

Why is TanStack Router route generation not working in Vite?▼

The most common cause is plugin order: tanstackRouter() must come before the framework plugin like react() in the Vite plugins array. Wrong order causes route generation and code splitting to fail silently without errors.

Do I need manual lazy routes when autoCodeSplitting is enabled?▼

No. When autoCodeSplitting is enabled, the plugin transforms route files at build time and handles splitting automatically. Adding manual lazyRouteComponent or createLazyRoute calls is redundant and conflicts with the plugin's behavior.