Generouted

1.20.2 verified Mon Apr 27 auth: no javascript

Generouted is a Vite plugin that generates client-side file-based routes from the src/pages directory, supporting React Router, TanStack Router, and Solid Router. Current stable version is 1.20.2, with frequent releases addressing compatibility with Vite 8 and Rolldown. Key differentiators include type-safe navigation, global modals, route-based code-splitting, data loaders/actions, nested layouts, pathless layout groups, and optional static/dynamic routes. It uses Vite's glob import API and provides generated components and hooks for each framework.

Common errors

error Error: Cannot find module '@generouted/react-router' or its corresponding type declarations. ↓

cause Missing dependency or incorrect import path from scoped package

fix

Install @generouted/react-router: npm install @generouted/react-router react-router

error TypeError: Cannot read properties of undefined (reading 'pathname') ↓

cause Using react-router-dom's useNavigate or Link instead of Generouted's type-safe versions

fix

Import useNavigate and Link from '@generouted/react-router' not 'react-router-dom'

error Error: @generouted/react-router: Vite plugin not found. Make sure to add generouted() to your vite config. ↓

cause Vite plugin not configured in vite.config.ts

fix

Add generouted() plugin: import generouted from '@generouted/react-router/plugin' and include in plugins array

error Error: [plugin:vite:import-analysis] Failed to resolve import "@generouted/react-router/link" ↓

cause Incorrect import path; the link module may have been removed or renamed

fix

Use import { Link } from '@generouted/react-router' instead of from a separate module

Warnings

breaking React Router integration: upgrade react-router-dom to v7+ and replace with react-router package to avoid version mismatches ↓

fix npm install react-router@latest && remove react-router-dom

gotcha Routes detection differences between dev and build modes (Vite 8 + Rolldown compatibility) ↓

fix Update to >=1.20.2

gotcha Undefined module imports from parent routes can occur ↓

fix Update to >=1.19.11

gotcha Internal browser router instantiation issue causing multiple instances ↓

fix Update to >=1.19.8

Install

npm install generouted

yarn add generouted

pnpm add generouted

Imports

Routes
wrong
```
import { Routes } from 'generouted'
```
correct
```
import { Routes } from '@generouted/react-router'
```
Package name is scoped under @generouted; main export is the generated Routes component

Link

wrong

import { Link } from 'react-router-dom'

correct

import { Link } from '@generouted/react-router/link'

Generouted provides its own Link component for type-safe navigation

useNavigate

wrong

import { useNavigate } from 'react-router-dom'

correct

import { useNavigate } from '@generouted/react-router'

Use Generouted's hook to ensure type-safety and correct route resolution

Module

import type { Module } from '@generouted/react-router'

Type import for route module definitions

Quickstart

Simple Vite project setup with Generouted React Router plugin, file-based routes in src/pages, dynamic routes with params

// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import generouted from '@generouted/react-router/plugin'

export default defineConfig({ plugins: [react(), generouted()] })

// src/main.tsx
import { createRoot } from 'react-dom/client'
import { Routes } from '@generouted/react-router'

createRoot(document.getElementById('root')!).render(<Routes />)

// src/pages/index.tsx
export default function Home() {
  return <h1>Hello Generouted!</h1>
}

// src/pages/about.tsx
export default function About() {
  return <h1>About</h1>
}

// src/pages/users/[id].tsx (dynamic route)
export default function User({ params }: { params: { id: string } }) {
  return <h1>User {params.id}</h1>
}