.storybook/main.js|ts) as follows:
Support for the SWC builder is currently experimental for Next.js projects, and it's not enabled by default. It requires you to opt in to use it.
If you're not using Storybook 7, please reference the previous documentation for guidance on configuring your Babel setup.
By default, Babel provides an opinionated configuration that works for most projects, relying on two distinct methods for configuring projects with the tool:
- Project-wide configuration: Babel will look for a
babel.config.jsor equivalent file in the root of your project and use it to configure your project's Babel setup.
- File-relative configuration: Babel will look for a
.babelrc.jsonor equivalent file, introspecting the project structure until it finds a configuration file. This will allow you to configure Babel individually for multiple aspects of your project.
Storybook relies on an agnostic approach to configuring Babel, enabling you to provide the necessary configuration for your project, and it will use it. Based on the supported frameworks, builders, and addons, it may include minor adjustments to ensure compatibility with Storybook's features. If you need to provide a custom configuration, you can generate a
.babelrc.json file by running the following command:
When the command runs, it will prompt you to install additional packages and generate a
.babelrc.json file in the current working directory of your project and apply it, assuming that you're using the default configuration and co-locating your Storybook stories in the current working directory of your project.
Example Babel configuration
For custom project configurations such as monorepos, where you have multiple Storybook configurations, creating a
.babelrc.json file in your project's current working directory may not be sufficient. In those cases, you can create a
babel.config.js file to override Babel's configuration, and Storybook will automatically detect and use it. See the Babel documentation for more information.
If you're working with a project that was initialized with Create React App, Storybook will automatically detect and use the Babel configuration provided by the tool enabled via the
@storybook/preset-create-react-app preset, allowing to use Storybook without any additional configuration.
If you have enabled the SWC builder option in a React-based project and you are not explicitly importing React in your
jsx|tsx files, it can cause Storybook to fail to load. SWC does not automatically import the
jsx-runtime module when using the SWC builder. To resolve this issue, you need to adjust your Storybook configuration file (i.e.,
.storybook/main.js|ts) and configure the
swc option as follows:
Out of the box, Storybook can detect and apply any Babel configuration you provided in your project. However, if you're running into a situation where your configuration is not being used, you configure the
BABEL_SHOW_CONFIG_FOR environment variable and set it to the file you want to inspect. For example:
When the command runs, it will output the Babel configuration applied to the file you specified despite showing a transpilation error in the console and preventing Storybook from loading. This is a known issue with Babel unrelated to Storybook, which you address by turning off the environment variable after inspecting the configuration and restarting Storybook.