Registry / devops / fractal-webpack-plugin

fractal-webpack-plugin

library4.1.7jsnpmunverified

A webpack plugin to integrate Fractal (a component library / styleguide tool) into a webpack build workflow. Current stable version is 4.1.7. It supports webpack 4 and 5, and Fractal 1.x. The plugin can either start a development server or build a static styleguide during webpack compilation. Key differentiators include simple configuration via a Fractal config file, seamless integration with webpack, and support for both server and build modes. Release cadence is irregular; last release was in 2023. Requires Node.js 10+.

devops

npm install fractal-webpack-plugin

github ↗package ↗

INSTALL

IMPORT

SIG · FRACTAL-WEBPACK-PL

fractal-webpack-plugin

devopsjavascriptv4.1.7

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.

FractalWebpackPlugin

✓ const FractalWebpackPlugin = require('fractal-webpack-plugin');

✗ import FractalWebpackPlugin from 'fractal-webpack-plugin';

This package does not provide a default ESM export; use CommonJS require. If you must import, use: import FractalWebpackPlugin from 'fractal-webpack-plugin'; may work if your bundler handles CJS interop.

FractalWebpackPlugin

✓ new FractalWebpackPlugin({ mode: 'server' })

✗ new FractalWebpackPlugin()

At least the mode option must be provided; default is 'server' but it's good practice to set it explicitly.

options

✓ new FractalWebpackPlugin({ mode: 'build', configPath: './path/to/fractal.config.js' })

✗ new FractalWebpackPlugin({ mode: 'server', configPath: 'fractal.js' })

Since v4.1.3, the default config path is 'fractal.config.js', not 'fractal.js'. For backwards compatibility, 'fractal.js' is still accepted as a fallback, but you should use the new filename.

Demonstrates typical webpack config with FractalWebpackPlugin in build mode, using default config path.

Debug

Known issues

breakingRemove browsersync option from plugin (v3.0.0). Set it in fractal config file instead.

fix

Remove the 'browsersync' option from the plugin options and configure browsersync in your fractal.config.js if needed.

affects: >=3.0.0

gotchaDefault config filename changed from 'fractal.js' to 'fractal.config.js' in v4.1.3. If no configPath is specified, the plugin will look for 'fractal.config.js' first, and fall back to 'fractal.js'.

fix

Rename your fractal config file to 'fractal.config.js' or set the configPath option explicitly.

affects: >=4.1.3

breakingPlugin requires webpack 4 or 5. It will not work with webpack 3 or earlier.

fix

Upgrade webpack to version 4 or 5.

affects: >=1.0.0

gotchaThe plugin does not provide a default export in ESM. Using import may fail in some bundlers.

fix

Use CommonJS require() or ensure your bundler handles CJS interop.

affects: all

Errors

Common errors & fixes

TypeError: FractalWebpackPlugin is not a constructor

Attempted to use import statement which may not resolve to the default export properly.

fix

Use const FractalWebpackPlugin = require('fractal-webpack-plugin');

Error: Cannot find module 'fractal.config.js'

The fractal config file is missing or the configPath option points to a non-existent file.

fix

Ensure the fractal config file exists at the specified path. Since v4.1.3, the default is 'fractal.config.js'.

Error: Mode must be either 'server' or 'build'

An invalid mode value was passed to the plugin options.

fix

Set mode to 'server' or 'build'.

Upgrade

Version history

4.1.7latest on npm

Audit

Dependencies

webpackoptionalPeer dependency for webpack plugin

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/adamlindqvist/fractal-webpack-plugin ↗

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