Gatsby: Using Gatsby in Storybook broken in version 2.9.0

[joealden]

Description

In a project I am working on, I am using Gatsby's Link component within Storybook stories. To get this working, I followed the instructions found here in the Gatsby docs. This has been working fine for over 2 months now.

However, when updating Gatsby from 2.8.8 to 2.9.0, Storybook fails to build because of a Gatsby
cache-dir error. This is what is logged to the console:

ERROR in ./node_modules/gatsby/cache-dir/loader.js
Module not found: Error: Can't resolve './match-paths.json' in '/x/x/node_modules/gatsby/cache-dir'
 @ ./node_modules/gatsby/cache-dir/loader.js 15:0-44 97:32-42
 @ ./node_modules/gatsby/cache-dir/public-page-renderer-dev.js
 @ ./node_modules/gatsby/cache-dir/public-page-renderer.js
 @ ./node_modules/gatsby/cache-dir/gatsby-browser-entry.js
 @ ./src/utils/UniversalLink.tsx
 @ ./stories/misc/UniversalLink.stories.tsx
 @ ./stories sync \.stories\.tsx$
 @ ./.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

The important part of this error is the following:

ERROR in ./node_modules/gatsby/cache-dir/loader.js
Module not found: Error: Can't resolve './match-paths.json' in '/x/x/node_modules/gatsby/cache-dir'

From this, I could tell that the problem was originating from a change made in 2.9.0 to cache-dir/loader.js, so I went and looked through the update diff. I found the following lines added:

https://github.com/gatsbyjs/gatsby/compare/[email protected]@2.9.0#diff-06ce5193de7c2c01dd947a5001c147c3R6

On L7 of the file, ./match-paths.json is being imported. On L6, there is a helpful comment noting that this file is "generated during bootstrap" (which I'm guessing means that it is generated only when gatsby dev or gatsby build is ran).

As using Gatsby components like Link in Storybook doesn't require you to run gatsby dev or gatsby build, this file isn't being generated, so when loader.js tries to import it, it results in the above error.

From looking at the git blame, this change was introduce by https://github.com/gatsbyjs/gatsby/pull/14359, so I'm tagging @Moocar and @KyleAMathews as they were the PR author and PR reviewer respectively.

Steps to reproduce

Try using Gatsby's Link component in a Storybook instance.

Environment

System:
OS: Linux 5.0 Solus 4.0
CPU: (16) x64 AMD Ryzen 7 2700X Eight-Core Processor
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 10.16.0 - /tmp/yarn--1560333901283-0.3912604025613824/node
Yarn: 1.16.0 - /tmp/yarn--1560333901283-0.3912604025613824/yarn
npm: 6.9.0 - /usr/bin/npm
Languages:
Python: 2.7.16 - /usr/bin/python
Browsers:
Firefox: 67.0.1
npmPackages:
gatsby: 2.9.0 => 2.9.0
gatsby-image: 2.1.3 => 2.1.3
gatsby-plugin-eslint: 2.0.5 => 2.0.5
gatsby-plugin-manifest: 2.1.1 => 2.1.1
gatsby-plugin-react-helmet: 3.0.12 => 3.0.12
gatsby-plugin-robots-txt: 1.4.0 => 1.4.0
gatsby-plugin-sharp: 2.1.3 => 2.1.3
gatsby-plugin-sitemap: 2.1.0 => 2.1.0
gatsby-plugin-styled-components: 3.0.7 => 3.0.7
gatsby-plugin-typescript: 2.0.15 => 2.0.15
gatsby-plugin-webpack-bundle-analyzer: 1.0.5 => 1.0.5
gatsby-source-filesystem: 2.0.39 => 2.0.39
gatsby-source-prismic: 2.3.0-alpha.3 => 2.3.0-alpha.3
gatsby-source-shopify: 2.0.37 => 2.0.37
gatsby-transformer-sharp: 2.1.21 => 2.1.21

[Moocar]

@joealden Thanks for the well thought out report. You're 100% correct on your diagnosis. I hadn't considered the case of using Gatsby-link without Gatsby itself. Luckily, this should be an easy fix. I can move the importing of match-paths.json into production-app.js (a core Gatsby file), and then dynamically set it on the loader like we do with addProdRequires. Incidentally, I now understand why they do that instead of importing it :).

[gfsd3v]

Damn, I should have searched before trying to find out what was wrong, I followed exacly the same steps that @joealden and was ready to open a issue, thanks guys.

[wardpeet]

Fixed in [email protected] :tada: