There are two main problems with Gatsby and Storybook, you'll most likely experience Storybook build errors if you're doing either of the following.
- You're using
<Link />
imported fromgatsby
- You have components with embedded GraphQL queries
These are not problems with either Gatsby or Storybook but there are one or two things we need to do in order to get the two playing nicely together. The main reasons we get Storybook build errors are outlined below.
- Gatsby exports as ES6 and Storybook by default expects all code to be ES5 / CommonJs.
- The
gatsby develop
andgatsby build
steps remove GraphQL queries, Storybook by default does not.
This recipe will automate the following steps
- Install babel plugins and presets
- Install babel-plugin-react-docgen
- Install Storybook React NPM packages and addons
- Create custom Storybook webpack config (main.js) for
js|jsx
- Configure Storybook / Gatsby Link settings (preview.js)
- Create example Link stories
- Add Storybook npm scripts to
package.json
Wanna give it a try?
gatsby recipes https://raw.githubusercontent.com/PaulieScanlon/gatsby-recipe-storybook-js/master/gatsby-recipe-storybook-js.mdx
I've written a blog post about this recipe if you're looking for a little more information: https://paulie.dev/posts/2020/04/gatsby-recipe-storybook-js/