{"id":22840,"library":"vite-plugin-solid-pages","title":"vite-plugin-solid-pages","description":"A Vite plugin for SolidJS that generates file-based routes for SPAs, following solid-start routing conventions. Version 0.4.3 is the latest stable release with no fixed release cadence (in-progress). Key differentiators: lightweight alternative to solid-start, provides virtual modules for routes and route info, supports lazy/eager loading, auto code-splits route config and component, and integrates with MDX and frontmatter.","status":"active","version":"0.4.3","language":"javascript","source_language":"en","source_url":"https://github.com/g-mero/vite-plugin-solid-pages","tags":["javascript","typescript"],"install":[{"cmd":"npm install vite-plugin-solid-pages","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-solid-pages","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-solid-pages","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required peer dependency for routing; must be installed separately, version ^0.16.1","package":"@solidjs/router","optional":false},{"reason":"Required peer dependency; version ^7.0.0 || ^8.0.0","package":"vite","optional":false}],"imports":[{"note":"ESM-only; CommonJS require will fail as the package has no default export in CJS","wrong":"const solidPages = require('vite-plugin-solid-pages')","symbol":"default","correct":"import solidPages from 'vite-plugin-solid-pages'"},{"note":"virtual:pages is a virtual module, not a file path. It must be imported directly, without any prefix","wrong":"import routes from 'vite-plugin-solid-pages/virtual:pages'","symbol":"virtual:pages","correct":"import routes from 'virtual:pages'"},{"note":"virtual:route-info is a separate virtual module providing route metadata; do not import from the package itself","wrong":"import routeInfo from 'vite-plugin-solid-pages'","symbol":"virtual:route-info","correct":"import routeInfo from 'virtual:route-info'"}],"quickstart":{"code":"// vite.config.ts\nimport { defineConfig } from 'vite'\nimport solidPlugin from 'vite-plugin-solid'\nimport solidPages from 'vite-plugin-solid-pages'\n\nexport default defineConfig({\n  plugins: [\n    solidPlugin(),\n    solidPages({\n      dir: 'src/pages',\n      extensions: ['tsx'],\n    })\n  ]\n})\n\n// src/env.d.ts\n/// <reference types=\"vite/client\" />\n/// <reference types=\"vite-plugin-solid-pages/client\" />\n\n// src/index.tsx\nimport { Router } from '@solidjs/router'\nimport { render } from 'solid-js/web'\nimport routes from 'virtual:pages'\n\nrender(() => (\n  <Router>\n    {routes}\n  </Router>\n), document.getElementById('root')!)\n","lang":"typescript","description":"Sets up the Vite plugin with file-based routing from src/pages, includes TypeScript declarations, and mounts routes via @solidjs/router."},"warnings":[{"fix":"Add the reference directive to your env.d.ts as shown in the quickstart.","message":"The plugin uses virtual modules (virtual:pages, virtual:route-info) that are only available after the Vite dev server runs. TypeScript may complain about missing modules unless you add the provided env.d.ts declarations.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Ensure @solidjs/router version matches ^0.16.1.","message":"SolidJS older versions may not be compatible. The plugin requires @solidjs/router ^0.16.1, which may differ from newer SolidJS versions.","severity":"deprecated","affected_versions":"0.4.3"},{"fix":"Use solid-start for SSR needs.","message":"The plugin is focused on SPA routing and does not support SSR or file-based layout like solid-start. Do not use for SSR projects.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Check documentation for the exact route config export syntax.","message":"Route configuration using exported const in files may not be recognized if the export is not correctly defined. Ensure file exports follow the expected pattern (e.g., export const route = { ... }).","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Set lazy: true in the plugin options or per route.","message":"Eager loading mode may increase bundle size. Use lazy loading for production to enable code splitting.","severity":"gotcha","affected_versions":">=0.0.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Add /// <reference types=\"vite-plugin-solid-pages/client\" /> to your env.d.ts file.","cause":"Missing or incorrect TypeScript declarations for virtual modules.","error":"Module not found: Can't resolve 'virtual:pages' in '...'"},{"fix":"Ensure the pages directory (default src/pages) contains at least one route file with valid extension.","cause":"routes from virtual:pages is undefined because the virtual module was not generated (e.g., no pages in configured directory).","error":"TypeError: Cannot read properties of undefined (reading 'forEach')"},{"fix":"Run 'pnpm add @solidjs/router' (version ^0.16.1).","cause":"Missing peer dependency @solidjs/router.","error":"Error: @solidjs/router is not installed"},{"fix":"Use ESM imports (import solidPages from ...). If you must use require(), use dynamic import: const solidPages = (await import('vite-plugin-solid-pages')).default","cause":"ESM syntax used in a CommonJS context (e.g., using require() to import the plugin).","error":"SyntaxError: Unexpected token 'export'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}