Gatsby: Using Gatsby with Storybook

[thekevinbrown]

Description

Gatsby uses Webpack 1, while Storybook uses Webpack 3, making it really hard to get both to work together in the same project.

I've tried a few different workarounds including moving Storybook to its own package with a separate node_modules directory (then it runs but no stories appear) etc, and I'm completely stuck. I'd love any help that anyone can provide.

Environment

Gatsby version: 1.9.215
Node.js version: v8.9.4
Operating System: OS X 10.13.3

File contents (if changed):

As per: https://github.com/craigcoles/gatsby-storybook

Actual result

$ gatsby develop
success delete html and css files from previous builds — 0.009 s
success open and validate gatsby-config.js — 0.009 s
success copy gatsby files — 0.032 s
success onPreBootstrap — 0.023 s
success source and transform nodes — 0.039 s
success building schema — 0.128 s
success createLayouts — 0.040 s
success createPages — 0.001 s
success createPagesStatefully — 0.026 s
success onPreExtractQueries — 0.001 s
success update schema — 0.076 s
success extract queries from components — 0.064 s
success run graphql queries — 0.038 s
success write out page data — 0.007 s
success write out redirect data — 0.001 s
success onPostBootstrap — 0.001 s

info bootstrap finished - 5.669 s

error There was an error compiling the html.js component for the development server.

See our docs page on debugging HTML builds for help https://goo.gl/yL9lND


  Error: Module build failed: TypeError: fileSystem.statSync is not a function

  - exists.js:7 module.exports
    [gatsby-storybook]/[babel-loader]/lib/utils/exists.js:7:25

  - resolve-rc.js:13 find
    [gatsby-storybook]/[babel-loader]/lib/resolve-rc.js:13:9

  - index.js:113 Object.module.exports
    [gatsby-storybook]/[babel-loader]/lib/index.js:113:132

Expected behavior

Gatsby should run.

Steps to reproduce

1. Clone the repository at https://github.com/craigcoles/gatsby-storybook

2. Run yarn or npm i in the new directory

3. Run gatsby develop

[craigcoles]

Managed to get this working by using babel-loader 7.1.1:

yarn add [email protected] --dev

[Credit]

[thekevinbrown]

@craigcoles, thanks so much for your help! I’ll give it a try tomorrow and will let you know if I have any trouble.

[thekevinbrown]

Works a treat, thanks so much!

[rstacruz]

Just chiming in for the curious: babel-loader 7.1.2, 7.1.3, and 7.1.4 don't work. Only 7.1.1 does... this is very strange.

[josiahdahl]

@craigcoles This fixed it for me too.