profile
viewpoint

Ask questionsImporting Link from gatsby breaks Storybook

Storybook breaks (https://github.com/gatsbyjs/gatsby/issues/10662) if a component includes import { Link } from 'gatsby'

This was working fine before https://github.com/gatsbyjs/gatsby/pull/9123 because

  • main was an es6 build
  • webpack would treeshake when Link was imported

Now that main is a commonjs build and the ES6 build is at module, it breaks since

  • the commonjs entry point at gatsby-browser-entry.js requires public-page-renderer
  • which tries to require pages.json
  • which doesn't exist because since presumably a gatsby build hasn't been run yet

public-page-renderer.js looks like

if (process.env.BUILD_STAGE === `develop`) {
  module.exports = preferDefault(require(`./public-page-renderer-dev`))
} else if (process.env.BUILD_STAGE === `build-javascript`) {
  module.exports = preferDefault(require(`./public-page-renderer-prod`))
} else {
  module.exports = () => null
}

I assumed that this would work since BUILD_STAGE is not set but it seems webpack wants to resolve both calls to require

gatsbyjs/gatsby

Answer questions Jimmydalecleveland

I'm still getting an error on gatsby: 2.8.4 and @storybook/react: 5.1.1 when trying to import any component using Link:

ERROR in my-gatsby/node_modules/gatsby/cache-dir/gatsby-browser-entry.js 17:2
Module parse failed: Unexpected token (17:2)
You may need an appropriate loader to handle this file type.
| 
| const StaticQuery = props => (
>   <StaticQueryContext.Consumer>
|     {staticQueryData => {
|       if (
 @ ./src/baseComponents/Link/Link.stories.jsx 4:0-30
 @ . sync \.stories\.(js|jsx)$
 @ ./.storybook/config.js
 @ multi my-gatsby/node_modules/@storybook/core/dist/server/common/polyfills.js /my-gatsby/node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js (webpack)-hot-middleware/client.js?reload=true

I've done all the steps in this tutorial: https://www.gatsbyjs.org/docs/visual-testing-with-storybook/ And changing entry as mentioned above did not do anything in my case.

Update: I spun up a gatsby starter with the same versions as my project and importing Link works fine after applying the changes from the "visual-testing-with-storybook" walkthrough.

My project that it isn't working on is a monorepo, using gatsby-themes so there may be something about its setup that is causing this issue but I still haven't located it.

useful!

Related questions

Error: Cannot create as TypeComposer the following value: Date. hot 3
Loading chunks while a new release is deployed hot 2
Webpack error #98123 when running "gatsby develop" hot 2
gatsby build error #11328 A page component must export a React component for it to be valid. Please make sure this file exports a React component: /Users/tiagosanchez/Documents/Projects/personalBlog/node_modules/gatsby-plugin-offline/app-shell.js hot 2
[gatsby-telemetry] error: src/postinstall.js not found in Linux environments hot 2
IE11: Object not valid as React Child hot 2
CircleCI build Error: spawn ENOMEM hot 2
[Help] I somehow managed to butcher my site's performance hot 2
Build gets stuck at Generating image thumbnails / Update schema on large sites hot 2
[gatsby-source-graphql] Shopify GraphQL Schema Error hot 2
UNHANDLED REJECTION Source and destination must not be the same. hot 2
gatsby-source-shopify unable to complete build hot 2
Gatsby's Use Of Polyfills and the 'Missing Resources for x' error hot 2
Autoprefixer "browsers" option is deprecated in v9, produces warnings hot 2
&#39;gatsby&#39; is not recognized as an internal or external command hot 2
Github User Rank List