{"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.","language":"javascript","status":"active","last_verified":"Sat Apr 25","install":{"commands":["npm install react-cosmos-plugin-webpack"],"cli":null},"imports":["import reactCosmosWebpackPlugin from 'react-cosmos-plugin-webpack'; // or require('react-cosmos-plugin-webpack').default","const { reactCosmosWebpackPlugin } = require('react-cosmos-plugin-webpack');","// In cosmos.config.js:\nexport default {\n  plugins: [require('react-cosmos-plugin-webpack').default]\n}"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}