{"id":21860,"library":"react-cosmos-plugin-vite","title":"React Cosmos Vite Plugin","description":"Official Vite plugin for React Cosmos, a development tool for building and testing React components in isolation. Version 7.3.0 supports React 18+, React 19, and Next.js 15. Actively maintained with monthly releases, it auto-generates a default index.html and auto-detects the main entry point. Key differentiator: seamless integration with React Cosmos's fixture and decorator system, enabling isolated component development without a full app setup. Requires react-cosmos >=7, vite, react, and react-dom as peer dependencies.","status":"active","version":"7.3.0","language":"javascript","source_language":"en","source_url":"https://github.com/react-cosmos/react-cosmos#main","tags":["javascript"],"install":[{"cmd":"npm install react-cosmos-plugin-vite","lang":"bash","label":"npm"},{"cmd":"yarn add react-cosmos-plugin-vite","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-cosmos-plugin-vite","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required to run the Vite dev server and build pipeline","package":"vite","optional":false},{"reason":"Core library for component isolation and fixture management","package":"react-cosmos","optional":false},{"reason":"Peer dependency for React rendering","package":"react","optional":false},{"reason":"Peer dependency for DOM rendering","package":"react-dom","optional":false}],"imports":[{"note":"The plugin is a named export, not a default export. Use braces.","wrong":"import reactCosmosVitePlugin from 'react-cosmos-plugin-vite'","symbol":"reactCosmosVitePlugin","correct":"import { reactCosmosVitePlugin } from 'react-cosmos-plugin-vite'"},{"note":"The package is ESM-only; require() is not supported.","wrong":"const generateCosmosIndexHtml = require('react-cosmos-plugin-vite').generateCosmosIndexHtml","symbol":"generateCosmosIndexHtml","correct":"import { generateCosmosIndexHtml } from 'react-cosmos-plugin-vite'"},{"note":"Vite config must be ESM in most setups; avoid CommonJS module.exports.","wrong":"module.exports = { plugins: [require('react-cosmos-plugin-vite').reactCosmosVitePlugin()] }","symbol":"defineConfig (from vite)","correct":"import { defineConfig } from 'vite'; import { reactCosmosVitePlugin } from 'react-cosmos-plugin-vite'; export default defineConfig({ plugins: [reactCosmosVitePlugin()] })"}],"quickstart":{"code":"// vite.config.ts\nimport { defineConfig } from 'vite';\nimport { reactCosmosVitePlugin } from 'react-cosmos-plugin-vite';\n\nexport default defineConfig({\n  plugins: [reactCosmosVitePlugin()],\n});\n\n// Install peer dependencies:\n// npm install --save-dev react-cosmos react-cosmos-plugin-vite vite react react-dom\n\n// Run Cosmos:\n// npx cosmos\n","lang":"typescript","description":"Shows how to configure Vite with the React Cosmos plugin, install peer dependencies, and start the Cosmos dev server."},"warnings":[{"fix":"Ensure react and react-dom are version 18 or higher. Alternatively, use react-cosmos-plugin-vite@6 if you need React 17.","message":"Version 7.0.0 removed support for React <18. Upgrade to React 18+ or stay on v6.x.","severity":"breaking","affected_versions":">=7.0.0"},{"fix":"In vite.config.ts: reactCosmosVitePlugin({ indexHtml: false }).","message":"The plugin auto-generates an index.html. If you have a custom index.html, it may conflict. Set the `indexHtml` option to disable auto-generation.","severity":"gotcha","affected_versions":">=6.0.0"},{"fix":"Use `reactCosmosVitePlugin` instead of `plugin`.","message":"The `plugin` export was renamed to `reactCosmosVitePlugin` in v6.0.0. The old name still works but is deprecated.","severity":"deprecated","affected_versions":">=6.0.0 <7.0.0"},{"fix":"Install react-dom: npm install react-dom.","message":"The plugin requires `react-dom` as a peer dependency even if you use React Native. Not installing react-dom will cause errors.","severity":"gotcha","affected_versions":">=6.0.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Run npm install --save-dev react-cosmos-plugin-vite.","cause":"The package is not installed or not in node_modules.","error":"Error: Cannot find module 'react-cosmos-plugin-vite'"},{"fix":"Use `import { reactCosmosVitePlugin } from 'react-cosmos-plugin-vite'`.","cause":"Incorrect import (default import instead of named import) or using require() in ESM context.","error":"TypeError: reactCosmosVitePlugin is not a function"},{"fix":"Upgrade Vite to version 4+ with `npm install vite@latest`.","cause":"Outdated Vite version.","error":"Error: The plugin requires at least Vite 4.0.0"},{"fix":"Upgrade React to 18 or later, or downgrade plugin to v6 (which supports React 17).","cause":"React version too old for v7 plugin.","error":"Error: 'react' must be version >=18.0.0"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}