Here are some answers to frequently asked questions. If you have a question, you can ask it by opening an issue on the Storybook Repository.
- How can I opt-out of Angular Ivy?
- How can I opt-out of Angular ngcc?
- How can I run coverage tests with Create React App and leave out stories?
- I see
ReferenceError: React is not definedwhen using Storybook with Next.js
- How do I setup Storybook to share Webpack configuration with Next.js?
- How do I setup React Fast Refresh with Storybook?
- How do I setup the new React Context Root API with Storybook?
- Why is there no addons channel?
- Why aren't Controls visible in the Canvas panel but visible in the Docs panel?
- Why aren't the addons working in a composed Storybook?
- Which community addons are compatible with the latest version of Storybook?
- Is it possible to browse the documentation for past versions of Storybook?
- What icons are available for my toolbar or my addon?
- I see a "No Preview" error with a Storybook production build
- Can I use Storybook with Vue 3?
- Is snapshot testing with Storyshots supported for Vue 3?
- Why are my MDX stories not working in IE11?
- Why aren't my code blocks highlighted with Storybook MDX
- Why aren't my MDX 2 stories working in Storybook?
- Why can't I import my own stories into MDX 2?
- Why are my mocked GraphQL queries failing with Storybook's MSW addon?
- Can I use other GraphQL providers with Storybook's MSW addon?
- Can I mock GraphQL mutations with Storybook's MSW addon?
- How can my code detect if it is running in Storybook?
- Why are my stories not showing up correctly when using certain characters?
- Why are the TypeScript examples and documentation using
asfor type safety?
- Why is Storybook's source loader returning undefined with curried functions?
- Why are my args no longer displaying the default values?
- Why isn't Storybook's test runner working?
- How does Storybook handle environment variables?
In case you are having trouble with Angular Ivy you can deactivate it in your
Please report any issues related to Ivy in our GitHub Issue Tracker as the support for View Engine will be dropped in a future release of Angular.
Create React App does not allow providing options to Jest in your
package.json, however you can run
jest with commandline arguments:
Next automatically defines
React for all of your files via a babel plugin. In Storybook, you can solve this either by:
import React from 'react'to your component files.
- Adding a
You can generally reuse webpack rules by placing them in a file that is
require()-ed from both your
next.config.js and your
.storybook/main.js files. For example:
Fast refresh is an opt-in feature that can be used in Storybook React. There are two ways that you can enable it, go ahead and pick one:
- You can set a
FAST_REFRESHenvironment variable in your
- Or you can set the following properties in your
If your installed React Version equals or is higher than 18.0.0, the new React Root API is automatically used and the newest React concurrent features can be used.
You can opt-out from the new React Root API by setting the following property in your
A common error is that an addon tries to access the "channel", but the channel is not set. It can happen in a few different cases:
You're trying to access addon channel (e.g., by calling
setOptions) in a non-browser environment like Jest. You may need to add a channel mock:Loading...
In React Native, it's a special case documented in #1192
If you're adding Storybook's dependencies manually, make sure you include the
@storybook/addon-controls dependency in your project and reference it in your
.storybook/main.js as follows:
Composition is a new feature that we released with version 6.0, and there are still some limitations to it.
For now, the addons you're using in a composed Storybook will not work.
We're working on overcoming this limitation, and soon you'll be able to use them as if you are working with a non-composed Storybook.
Starting with Storybook version 6.0, we've introduced some great features aimed at streamlining your development workflow.
With this, we would like to point out that if you plan on using addons created by our fantastic community, you need to consider that some of those addons might be working with an outdated version of Storybook.
We're actively working to provide a better way to address this situation, but in the meantime, we would ask for a bit of caution on your end so that you don't run into unexpected problems. Let us know by creating an issue in the Storybook repo so that we can gather information and create a curated list with those addons to help not only you but the rest of the community.
With the release of version 6.0, we updated our documentation as well. That doesn't mean that the old documentation was removed. We kept it to help you with your Storybook migration process. Use the content from the table below in conjunction with our migration guide .
We're only covering versions 5.3 and 5.0 as they were important milestones for Storybook. If you want to go back in time a little more, you'll have to check the specific release in the monorepo.
storiesOfformat has been removed. For the time being, we're still supporting it, and we have documentation for it. But be advised that this is bound to change in the future.
@storybook/components package, you get a set of icons that you can use to customize your UI. Use the table below as a reference while writing your addon or defining your Storybook global types.
Go through this story to see how the icons look.
If you're using the
serve package to verify your production build of Storybook, you'll get that error. It relates to how
serve handles rewrites. For instance,
/iframe.html is rewritten into
/iframe, and you'll get that error.
We recommend that you use http-server instead and use the following command to preview Storybook:
http-serveras a development dependency and create a new script to preview your production build of Storybook.
Yes, with the release of version 6.2, Storybook now includes support for Vue 3. See the install page for instructions.
Yes, with the release of version 6.2, the
Storyshots addon will automatically detect Vue 3 projects.
If you run into a situation where this is not the case, you can adjust the
config object and manually specify the framework (e.g.,
See our documentation on how to customize the Storyshots configuration.
Currently there's an issue when using MDX stories with IE11. This issue does not apply to DocsPage. If you're interested in helping us fix this issue, read our Contribution guidelines and submit a pull request.
react-syntax-highlighter's documentation for a list of available languages.
Applying this small change will enable you to add syntax highlight for SCSS or any other language available.
MDX 2 introduced some changes to how the code is rendered. For example, if you enabled it in your Storybook and you have the following code block:
You'll need to update it to make it compatible with MDX 2.
See the following issue for more information.
This is a known issue with MDX 2. We're working to fix it. For now you can apply the following workaround:
With Angular, the most common issue is the placement of the
mockServiceWorker.js file. Use this example as a point of reference.
Yes, check the addon's examples to learn how to integrate different providers.
No, currently, the MSW addon only has support for GraphQL queries. If you're interested in including this feature, open an issue in the MSW addon repository and follow up with the maintainer.
You can do this by checking for the
IS_STORYBOOK global variable, which will equal
true when running in Storybook. The environment variable
process.env.STORYBOOK is also set to
Storybook allows you to use most characters while naming your stories. Still, specific characters (e.g.,
#) can lead to issues when Storybook generates the internal identifier for the story, leading to collisions and incorrectly outputting the correct story. We recommend using such characters sparsely.
We're aware that the default Typescript story construct might seem outdated and could potentially introduce a less than ideal way of handling type safety and strictness and could be rewritten as such:
Although valid, it introduces additional boilerplate code to the story definition. Instead, we're working towards implementing a safer mechanism based on what's currently being discussed in the following issue. Once the feature is released, we'll migrate our existing examples and documentation accordingly.
This is a known issue with Storybook. If you're interested in getting it fixed, open an issue with a working reproduction so that it can be triaged and fixed in future releases.
Before version 6.3, unset args were set to the
argTypes.defaultValue if specified or inferred from the component's properties (e.g., React's prop types, Angular inputs, Vue props). Starting with version 6.3, Storybook no longer infers default values but instead defines the arg's value as
undefined when unset, allowing the framework to supply its default value.
If you are using
argTypes.defaultValue to fix the above, you no longer need to, and you can safely remove it from your stories.
Additionally, suppose you were using
argTypes.defaultValue or relying on inference to set a default value for an arg. In that case, you should define the arg's value at the component level instead:
For Storybook's Docs, you can manually configure the displayed value by configuring the
There's an issue with Storybook's test runner and the latest version of Jest (i.e., version 28), which prevents it from running effectively. As a workaround, you can downgrade Jest to the previous stable version (i.e., version 27), and you'll be able to run it. See the following issue for more information.
Storybook has built-in support for environment variables. By default, environment variables are only available in Node.js code and are not available in the browser as some variables should be kept secret (e.g., API keys) and not exposed to anyone visiting the published Storybook.
To expose a variable, you must preface its name with
STORYBOOK_API_URL will be available in browser code but
API_KEY will not. Additionally you can also customize which variables are exposed by setting the
env field in the
.env.* to your
.gitignore file and set up the environment variables manually on your hosting provider (e.g., GitHub).