Registry / web-framework / react-cosmos-plugin-webpack

react-cosmos-plugin-webpack

library7.3.0jsnpmunverified

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.

web-framework testing

npm install react-cosmos-plugin-webpack

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · REACT-COSMOS-PLUGI

react-cosmos-plugin-webpack

web-frameworkjavascriptv7.3.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

react-cosmos-plugin-webpack

✓ import reactCosmosWebpackPlugin from 'react-cosmos-plugin-webpack'; // or require('react-cosmos-plugin-webpack').default

✗ const reactCosmosWebpackPlugin = require('react-cosmos-plugin-webpack');

Since React Cosmos 7, the plugin is ESM-first. In CJS, use require('react-cosmos-plugin-webpack').default. TypeScript users should use default import.

reactCosmosWebpackPlugin

✓ const { reactCosmosWebpackPlugin } = require('react-cosmos-plugin-webpack');

✗ import { reactCosmosWebpackPlugin } from 'react-cosmos-plugin-webpack';

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`.

default export

✓ // In cosmos.config.js: export default { plugins: [require('react-cosmos-plugin-webpack').default] }

✗ plugins: ['react-cosmos-plugin-webpack']

The plugin configuration expects a function reference, not a string. Pass the imported plugin function directly.

Shows how to set up the Webpack plugin in cosmos.config.js, including a custom webpack config override to handle SVG files.

// cosmos.config.js const webpackPlugin = require('react-cosmos-plugin-webpack').default; module.exports = { plugins: [webpackPlugin], // Optional: webpack config override webpack: (config) => { config.module.rules.push({ test: /\.svg$/, use: ['@svgr/webpack'], }); return config; }, }; // Then run `npx cosmos` to start the Cosmos development server.

Debug

Known issues

breakingIn React Cosmos 7, the plugin is ESM-first. Using CommonJS require() without accessing .default will fail.

fix

Use `const plugin = require('react-cosmos-plugin-webpack').default;` or switch to ESM imports.

affects: >=7.0.0

deprecatedThe `webpack` config option in cosmos.config.js is deprecated in favor of using the plugin's own webpack config override.

fix

Pass webpack config override directly to the plugin via options, e.g., `[webpackPlugin({ config: { ... } })]`.

affects: >=7.0.0

gotchaThe plugin does not automatically detect webpack configuration; you must manually specify it via cosmos.config.js.

fix

Add `webpack: (config) => config` or use the plugin's built-in config handling.

affects: all

gotchaIf using TypeScript, ensure your cosmos.config.ts exports the config object correctly; common mistake: using `export default` without proper module interop.

fix

Use `export default require('react-cosmos-plugin-webpack').default` or use ESM imports.

affects: all

Errors

Common errors & fixes

Error: Cannot find module 'react-cosmos-plugin-webpack'

Package not installed or listed in dependencies.

fix

Run `npm install react-cosmos-plugin-webpack --save-dev` or `yarn add react-cosmos-plugin-webpack --dev`.

TypeError: webpackPlugin is not a function

Using CommonJS require without .default.

fix

Change `const webpackPlugin = require('react-cosmos-plugin-webpack');` to `const webpackPlugin = require('react-cosmos-plugin-webpack').default;`.

Module parse failed: Unexpected token (1:0)

Webpack configuration missing loader for file type (e.g., SVG, TypeScript).

fix

Add appropriate Webpack rule in cosmos.config.js webpack override.

Upgrade

Version history

7.3.0latest on npm

Audit

Dependencies

react-cosmosrequiredCore React Cosmos runtime dependency; plugin communicates with Cosmos server and renderer.

webpackrequiredWebpack is the build tool; plugin extends Webpack configuration.

Agent activity

8 hits · last 30 days

node

Amazon

Resources

githubhttps://github.com/react-cosmos/react-cosmos.git#main ↗

packagehttps://www.npmjs.com/package/react-cosmos-plugin-webpack ↗

homepagehttps://reactcosmos.org ↗