{"id":20495,"library":"react-cosmos-plugin-webpack","title":"React Cosmos Webpack Plugin","description":"The official Webpack plugin for React Cosmos (v7.3.0), a development tool for building isolated React component libraries and fixture-based testing. This plugin integrates React Cosmos with Webpack-based projects (e.g., Create React App, custom Webpack configs). React Cosmos 7 supports React 18/19 and Next.js 15, with a revamped UI, improved Vite plugin, and peer dependencies on react, react-dom, react-cosmos, and webpack. Releases follow a monthly cadence. Key differentiators: zero-config setup for Webpack, static prerendering support, and seamless integration with the Cosmos ecosystem for component-level development.","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-webpack","lang":"bash","label":"npm"},{"cmd":"yarn add react-cosmos-plugin-webpack","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-cosmos-plugin-webpack","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core React Cosmos runtime dependency; plugin communicates with Cosmos server and renderer.","package":"react-cosmos","optional":false},{"reason":"Webpack is the build tool; plugin extends Webpack configuration.","package":"webpack","optional":false}],"imports":[{"note":"Since React Cosmos 7, the plugin is ESM-first. In CJS, use require('react-cosmos-plugin-webpack').default. TypeScript users should use default import.","wrong":"const reactCosmosWebpackPlugin = require('react-cosmos-plugin-webpack');","symbol":"react-cosmos-plugin-webpack","correct":"import reactCosmosWebpackPlugin from 'react-cosmos-plugin-webpack'; // or require('react-cosmos-plugin-webpack').default"},{"note":"Named export is not available; the module exports a default function. For named import, you must use CJS and destructure from default export, or use `import pkg from '...'` then access `pkg.default`.","wrong":"import { reactCosmosWebpackPlugin } from 'react-cosmos-plugin-webpack';","symbol":"reactCosmosWebpackPlugin","correct":"const { reactCosmosWebpackPlugin } = require('react-cosmos-plugin-webpack');"},{"note":"The plugin configuration expects a function reference, not a string. Pass the imported plugin function directly.","wrong":"plugins: ['react-cosmos-plugin-webpack']","symbol":"default export","correct":"// In cosmos.config.js:\nexport default {\n  plugins: [require('react-cosmos-plugin-webpack').default]\n}"}],"quickstart":{"code":"// cosmos.config.js\nconst webpackPlugin = require('react-cosmos-plugin-webpack').default;\n\nmodule.exports = {\n  plugins: [webpackPlugin],\n  // Optional: webpack config override\n  webpack: (config) => {\n    config.module.rules.push({\n      test: /\\.svg$/,\n      use: ['@svgr/webpack'],\n    });\n    return config;\n  },\n};\n\n// Then run `npx cosmos` to start the Cosmos development server.","lang":"javascript","description":"Shows how to set up the Webpack plugin in cosmos.config.js, including a custom webpack config override to handle SVG files."},"warnings":[{"fix":"Use `const plugin = require('react-cosmos-plugin-webpack').default;` or switch to ESM imports.","message":"In React Cosmos 7, the plugin is ESM-first. Using CommonJS require() without accessing .default will fail.","severity":"breaking","affected_versions":">=7.0.0"},{"fix":"Pass webpack config override directly to the plugin via options, e.g., `[webpackPlugin({ config: { ... } })]`.","message":"The `webpack` config option in cosmos.config.js is deprecated in favor of using the plugin's own webpack config override.","severity":"deprecated","affected_versions":">=7.0.0"},{"fix":"Add `webpack: (config) => config` or use the plugin's built-in config handling.","message":"The plugin does not automatically detect webpack configuration; you must manually specify it via cosmos.config.js.","severity":"gotcha","affected_versions":"all"},{"fix":"Use `export default require('react-cosmos-plugin-webpack').default` or use ESM imports.","message":"If using TypeScript, ensure your cosmos.config.ts exports the config object correctly; common mistake: using `export default` without proper module interop.","severity":"gotcha","affected_versions":"all"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Run `npm install react-cosmos-plugin-webpack --save-dev` or `yarn add react-cosmos-plugin-webpack --dev`.","cause":"Package not installed or listed in dependencies.","error":"Error: Cannot find module 'react-cosmos-plugin-webpack'"},{"fix":"Change `const webpackPlugin = require('react-cosmos-plugin-webpack');` to `const webpackPlugin = require('react-cosmos-plugin-webpack').default;`.","cause":"Using CommonJS require without .default.","error":"TypeError: webpackPlugin is not a function"},{"fix":"Add appropriate Webpack rule in cosmos.config.js webpack override.","cause":"Webpack configuration missing loader for file type (e.g., SVG, TypeScript).","error":"Module parse failed: Unexpected token (1:0)"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}