{"id":20044,"library":"fractal-webpack-plugin","title":"Fractal Webpack Plugin","description":"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+.","status":"active","version":"4.1.7","language":"javascript","source_language":"en","source_url":"https://github.com/adamlindqvist/fractal-webpack-plugin","tags":["javascript","Webpack","Fractal","Styleguide","UI"],"install":[{"cmd":"npm install fractal-webpack-plugin","lang":"bash","label":"npm"},{"cmd":"yarn add fractal-webpack-plugin","lang":"bash","label":"yarn"},{"cmd":"pnpm add fractal-webpack-plugin","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for webpack plugin","package":"webpack","optional":true}],"imports":[{"note":"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.","wrong":"import FractalWebpackPlugin from 'fractal-webpack-plugin';","symbol":"FractalWebpackPlugin","correct":"const FractalWebpackPlugin = require('fractal-webpack-plugin');"},{"note":"At least the mode option must be provided; default is 'server' but it's good practice to set it explicitly.","wrong":"new FractalWebpackPlugin()","symbol":"FractalWebpackPlugin","correct":"new FractalWebpackPlugin({ mode: 'server' })"},{"note":"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.","wrong":"new FractalWebpackPlugin({ mode: 'server', configPath: 'fractal.js' })","symbol":"options","correct":"new FractalWebpackPlugin({ mode: 'build', configPath: './path/to/fractal.config.js' })"}],"quickstart":{"code":"const path = require('path');\nconst FractalWebpackPlugin = require('fractal-webpack-plugin');\n\nmodule.exports = {\n  entry: path.resolve('./src/index.js'),\n  output: {\n    path: path.resolve('./dist'),\n    filename: 'bundle.js'\n  },\n  plugins: [\n    new FractalWebpackPlugin({\n      mode: 'build',\n      configPath: './fractal.config.js'\n    })\n  ]\n};","lang":"javascript","description":"Demonstrates typical webpack config with FractalWebpackPlugin in build mode, using default config path."},"warnings":[{"fix":"Remove the 'browsersync' option from the plugin options and configure browsersync in your fractal.config.js if needed.","message":"Remove browsersync option from plugin (v3.0.0). Set it in fractal config file instead.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Rename your fractal config file to 'fractal.config.js' or set the configPath option explicitly.","message":"Default 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'.","severity":"gotcha","affected_versions":">=4.1.3"},{"fix":"Upgrade webpack to version 4 or 5.","message":"Plugin requires webpack 4 or 5. It will not work with webpack 3 or earlier.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Use CommonJS require() or ensure your bundler handles CJS interop.","message":"The plugin does not provide a default export in ESM. Using import may fail in some bundlers.","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":"Use const FractalWebpackPlugin = require('fractal-webpack-plugin');","cause":"Attempted to use import statement which may not resolve to the default export properly.","error":"TypeError: FractalWebpackPlugin is not a constructor"},{"fix":"Ensure the fractal config file exists at the specified path. Since v4.1.3, the default is 'fractal.config.js'.","cause":"The fractal config file is missing or the configPath option points to a non-existent file.","error":"Error: Cannot find module 'fractal.config.js'"},{"fix":"Set mode to 'server' or 'build'.","cause":"An invalid mode value was passed to the plugin options.","error":"Error: Mode must be either 'server' or 'build'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}