Gatsby: Gatsby Version >= 2.0.24 breaks Storybook support

[NathHorrigan]

Description

When following the gatsby docs for storybook support (https://www.gatsbyjs.org/docs/visual-testing-with-storybook/) on any version >= 2.0.24 you get the following fatal error:

ERROR in ./node_modules/gatsby/cache-dir/commonjs/public-page-renderer-dev.js
Module not found: Error: Can't resolve './pages.json' in '.....PROJECT..../node_modules/gatsby/cache-dir/commonjs'
 @ ./node_modules/gatsby/cache-dir/commonjs/public-page-renderer-dev.js 12:36-59
 @ ./node_modules/gatsby/cache-dir/commonjs/public-page-renderer.js
 @ ./node_modules/gatsby/cache-dir/commonjs/gatsby-browser-entry.js
 @ ./src/components/header/index.js
 @ ./src/components/header/header.stories.js
 @ ./src sync .stories.js$
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js (webpack)-hot-middleware/client.js?reload=true

Steps to reproduce

• Create fresh Gatsby project on version >= 2.0.24
• Follow Gatsby guide: https://www.gatsbyjs.org/docs/visual-testing-with-storybook/
• Error Occurs

Expected result

Storybook should compile & serve

Actual result

Fatal Crash: See Above

Environment

System:
    OS: macOS 10.14
    CPU: x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 10.13.0 - ~/.nvm/versions/node/v10.13.0/bin/node
    Yarn: 1.12.3 - /usr/local/bin/yarn
    npm: 6.4.1 - ~/.nvm/versions/node/v10.13.0/bin/npm
  Browsers:
    Safari: 12.0
  npmPackages:
    gatsby: 2.0.24 => 2.0.24
    gatsby-image: ^2.0.20 => 2.0.25
    gatsby-plugin-manifest: ^2.0.9 => 2.0.12
    gatsby-plugin-offline: ^2.0.16 => 2.0.20
    gatsby-plugin-react-helmet: ^3.0.2 => 3.0.5
    gatsby-plugin-sharp: ^2.0.14 => 2.0.16
    gatsby-source-filesystem: ^2.0.8 => 2.0.12
    gatsby-transformer-sharp: ^2.1.8 => 2.1.9

[sidharthachatterjee]

Thank you for opening this @NathHorrigan

Please add the following to .storybook/webpack.config.js to fix this

// Prefer Gatsby ES6 entrypoint (module) over commonjs (main) entrypoint
  defaultConfig.resolve.mainFields = ["browser", "module", "main"]

[pardesiaka08]

Hi, I am facing an issue on integrating storybook with gatsby.As my gatsby site consists of components which uses graphql queries which are giving an error.Is there any solution to create storybook for such components.

footerSocialIcons Component

Storybook for FooterSocialIcons Component

import React from "react";
import { storiesOf } from "@storybook/react";
import FooterSocialIcons from './footerSocialIcons';

storiesOf("FooterSocialIcons", module).add(
"with diffent SocialIcons",
() => (
),
{ info: "It should shows social icons with links" }
);

Error while creating the storybook for this component

It appears like Gatsby is misconfigured. Gatsby related graphql calls are supposed to only be evaluated at compile time, and then compiled away,. Unfortunately, something went wrong and the query was left in the compiled code. .Unless your site has a complex or custom babel/Gatsby configuration this is likely a bug in Gatsby.
Error: It appears like Gatsby is misconfigured. Gatsby related graphql calls are supposed to only be evaluated at compile time, and then compiled away,. Unfortunately, something went wrong and the query was left in the compiled code.

.Unless your site has a complex or custom babel/Gatsby configuration this is likely a bug in Gatsby.

Any solutions?

[rstacruz]

I don't think this issue should be closed - it still persists in the latest versions of Gatsby (2.3) and Storybook (5.0), with the instructions in the Gatsby docs.

This error happens anytime you try to include a component that uses <StaticQuery> or useStaticQuery:

Error: It appears like Gatsby is misconfigured. Gatsby related graphql calls are supposed to only be evaluated at compile time, and then compiled away,. Unfortunately, something went wrong and the query was left in the compiled code.

I don't think there's an easy solution to this one at the moment.

[JenniferMcIntyre-xyz]

Anyone have a recent update to this?

[dakebl]

I don't think this is strictly an issue with Gatsby, but a mismatch of context when Storybook is rendering components that expect the GraphQL data mesh for data fetching:

https://github.com/storybooks/frontpage/issues/43#issuecomment-493798728

Hey @domyen, I looked into it and it makes sense. Gatsby provides static files that are created during the initial compilation of the build process, which is when the GraphQL queries are run. This means that the data collected from the query has already been used to write the file that will be served as part of the production app.

In the Storybook context however, we render the component in isolation and therefore forego the initial compilation that fetched the data for the component.

I did find a post from a few months ago that worked around this issue: gatsbyjs/gatsby#12007 (comment)

The short of it being that adding babel-plugin-remove-graphql-queries (as we have in our webpack config) will remove the GraphQL queries all together but only when the NODE_ENV is set to production. Storybook sets the NODE_ENV to development by default, so we can fix this by updating the npm scripts to set NODE_ENV:

{
    "storybook": "NODE_ENV=production start-storybook -p 6006 -s static",
    "build-storybook": "NODE_ENV=production build-storybook -s static",
}