compilers

26 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

SWC compiler default for Webpack projects

SWC is the default compiler for Storybook in Webpack-based projects with supported frameworks, except for Angular, Create React App, Ember.js, and Next.js. SWC provides faster loading times and is built on Rust for improved performance and reduced build times.

SWC builder support for Next.js is experimental

Support for the SWC builder is currently experimental for Next.js projects and is not enabled by default. It requires explicit opt-in to use it.

Babel configuration methods in Storybook

Storybook supports two methods for configuring Babel: project-wide configuration using babel.config.js or equivalent file in the project root, and file-relative configuration using .babelrc.json or equivalent file. Storybook uses an agnostic approach and will apply the configuration you provide with minor adjustments for compatibility with Storybook features.

Babel configuration for monorepos

For custom project configurations such as monorepos with multiple Storybook configurations, create a babel.config.js file to override Babel's configuration, and Storybook will automatically detect and use it.

Create React App automatic Babel configuration

When working with a Create React App project, Storybook automatically detects and uses the Babel configuration provided by Create React App through the @storybook/preset-create-react-app preset, requiring no additional configuration.

SWC jsx-runtime issue in React projects

When using the SWC builder in React-based projects without explicitly importing React in jsx|tsx files, Storybook may fail to load because SWC does not automatically import the jsx-runtime module. To resolve this, configure the swc option in .storybook/main.js|ts.

Debugging Babel configuration issues

To debug Babel configuration issues, use the BABEL_SHOW_CONFIG_FOR environment variable set to the file you want to inspect. For example: BABEL_SHOW_CONFIG_FOR=.storybook/preview.js yarn storybook. This outputs the Babel configuration applied to the specified file. After inspecting, turn off the environment variable and restart Storybook.

Customize webpack setup with webpackFinal

You can customize Storybook's webpack setup by providing a webpackFinal field in .storybook/main.js. The value should be an async function that receives a webpack config and eventually returns a webpack config.

Default webpack config supports importing images and static files

Storybook's default webpack configuration allows you to import images and other local files and have them built into the Storybook.

Default webpack config supports importing JSON as JavaScript

Storybook's default webpack configuration allows you to import .json files and have them expanded to a JavaScript object.

Debug webpack configuration with CLI flags

To see the exact details of the webpack config, run 'yarn storybook dev --debug-webpack' for development mode or 'yarn storybook build --debug-webpack' for production mode.

Storybook uses Webpack 4 by default

Storybook builds your project with Webpack 4 by default.

Opt into Webpack 5 builder

If your project uses Webpack 5, you can opt into the Webpack 5 builder by installing the required dependencies (@storybook/builder-webpack5 and @storybook/manager-webpack5) and updating your Storybook configuration.

Webpack 5 lazy compilation via lazyCompilation flag

Storybook supports Webpack's experimental lazy compilation feature via the lazyCompilation builder flag. This feature applies in development mode and will mean your Storybook will start up faster, at the cost of slightly slower browsing time when you change stories.

Webpack 5 filesystem caching via fsCache flag

Storybook supports Webpack's filesystem caching feature via the fsCache builder flag. This feature will mean build output is cached between runs of Storybook, speeding up subsequent startup times.

webpackFinal function receives default config and options object

The webpackFinal field should export a function which will receive the default webpack config as its first argument. The second argument is an options object from Storybook, which will have information about where the config came from, whether you're in production or development mode, etc.

Preserve entry and output in webpack config customizations

When customizing Storybook's webpack config, you must preserve the following config options: entry and output.

HtmlWebpackPlugin required in webpack config

Storybook's webpack config requires the HtmlWebpackPlugin to generate the preview page. Rather than overwriting config.plugins you should append to it or overwrite it with care.

Exclude .ejs file extension from custom loaders

If your custom webpack config uses a loader that does not explicitly include specific file extensions via the test property, it is necessary to exclude the .ejs file extension from that loader.

webpackFinal only affects story rendering, not manager UI

Storybook uses webpackFinal to render your components in Storybook's preview iframe. Storybook has an entirely separate webpack config for its UI (also referred to as the manager), so customizations made via webpackFinal only apply to the rendering of your stories.

Reuse existing webpack config by importing and merging

You can import your existing project's webpack config into Storybook's .storybook/main.js and merge both configs together. This allows you to replace Storybook's loaders with the ones from your app's webpack.config.js.

TypeScript module resolution with tsconfig-paths-webpack-plugin

When working with TypeScript projects, the default Webpack configuration may fail to resolve module aliases defined in your tsconfig file. You can use tsconfig-paths-webpack-plugin while extending Storybook's Webpack config to resolve this issue.

Vue CLI projects may require custom webpack config import

Projects initialized via generators like Vue CLI may require that you import their own webpack config file (e.g., /projectRoot/node_modules/@vue/cli-service/webpack.config.js) to use a certain feature with Storybook.

Custom Webpack configuration in Storybook

Any Webpack modifications desired for Storybook should be made in .storybook/main.js|ts using the webpackFinal configuration. If Next.js supports a feature out of the box, it works in Storybook. Not all Webpack modifications are copy-paste-able between next.config.js and Storybook's config; research proper modification methods for Storybook's Webpack config.

Custom Vite configuration in Storybook

You can customize the Vite configuration used by Storybook in your .storybook/main.js|ts file. By default, Storybook's configuration extends the Vite configuration used by your project, but you can configure it to not do so.

Preact Vite framework builder option

The builder option is a Record<string, any> that configures options for the framework's builder. For Preact with Vite, available options can be found in the Vite builder documentation.

Give your agent this brain