Upgrade to Gatsby 4 breaks Storybook

[sqpollen]

The Gatsby team referred me here from this issue

Description

I've upgraded to Gatsby 4.0.0 using this guide and updated all gatsby-plugins. Builds are working as expected, but Storybook will not run and returns the following errors.

ModuleNotFoundError: Module not found: Error: Can't resolve '@gatsbyjs/reach-router/lib/utils' in '/Users/me/graingrowers/web/node_modules/gatsby-link/dist'
Did you mean 'utils.js'?
BREAKING CHANGE: The request '@gatsbyjs/reach-router/lib/utils' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

I've upgraded Storybook to latest version as part of troubleshooting and the error still occurs.

Here is package.json

{
...
  },
  "dependencies": {
    "@reach/dialog": "^0.17.0",
    "@reach/skip-nav": "^0.15.0",
    "@sanity/block-content-to-react": "^3.0.0",
    "algoliasearch": "^4.10.3",
    "aws-cli": "^0.0.2",
    "aws-sdk": "^2.1026.0",
    "axios": "^0.21.1",
    "bulma": "^0.9.3",
    "date-fns": "^2.22.1",
    "dotenv": "^10.0.0",
    "fast-csv": "^4.3.6",
    "gatsby": "^4.0.0",
    "gatsby-plugin-algolia": "^0.26.0",
    "gatsby-plugin-bugherd": "^1.0.2",
    "gatsby-plugin-canonical-urls": "^4.19.0",
    "gatsby-plugin-google-gtag": "^4.19.0",
    "gatsby-plugin-google-tagmanager": "^4.19.0",
    "gatsby-plugin-image": "^2.19.0",
    "gatsby-plugin-manifest": "^4.19.0",
    "gatsby-plugin-postcss": "^5.19.0",
    "gatsby-plugin-react-helmet": "^5.19.0",
    "gatsby-plugin-robots-txt": "^1.7.1",
    "gatsby-plugin-rollbar": "^1.1.0",
    "gatsby-plugin-rollbar-deploy": "^1.0.0",
    "gatsby-plugin-s3": "^0.3.8",
    "gatsby-plugin-sass": "^5.19.0",
    "gatsby-plugin-sharp": "^4.19.0",
    "gatsby-plugin-svgr": "^3.0.0-beta.0",
    "gatsby-remark-images-contentful": "^5.1.0",
    "gatsby-source-contentful": "^6.1.4",
    "gatsby-source-filesystem": "^3.14.0",
    "gatsby-source-sanity": "^7.0.7",
    "gatsby-transformer-sharp": "^3.14.0",
    "gatsby-transformer-sqip": "^4.1.4",
    "intersection-observer": "^0.12.0",
    "luxon": "^2.3.1",
    "minipass": "2.7.0",
    "prop-types": "^15.7.2",
    "react": "^17.0.2",
    "react-content-loader": "^6.0.3",
    "react-dom": "^17.0.2",
    "react-google-recaptcha": "^2.1.0",
    "react-helmet": "^6.1.0",
    "react-instantsearch-dom": "^6.12.0",
    "react-obfuscate": "^3.6.8",
    "react-player": "^2.9.0",
    "react-select": "^4.3.1",
    "sass": "^1.35.1",
    "sharp": "^0.30.3",
    "svgo": "^2.3.1",
    "url-parse": "^1.5.3"
  },
  "devDependencies": {
    "@babel/core": "^7.14.3",
    "@babel/preset-env": "^7.14.5",
    "@babel/preset-react": "^7.14.5",
    "@sambego/storybook-state": "^2.0.1",
    "@storybook/addon-a11y": "^6.3.6",
    "@storybook/addon-actions": "^6.3.6",
    "@storybook/addon-essentials": "^6.3.6",
    "@storybook/addon-links": "^6.3.6",
    "@storybook/addon-postcss": "^2.0.0",
    "@storybook/builder-webpack5": "^6.3.6",
    "@storybook/manager-webpack5": "^6.3.6",
    "@storybook/preset-scss": "^1.0.3",
    "@storybook/react": "^6.3.6",
    "@svgr/webpack": "^5.5.0",
    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.2",
    "aws-sdk": "^2.1026.0",
    "babel-eslint": "^10.1.0",
    "babel-jest": "^27.0.2",
    "babel-loader": "^8.2.2",
    "babel-preset-gatsby": "^1.7.1",
    "broken-link-checker": "^0.7.8",
    "chai": "^4.3.4",
    "chromatic": "^5.9.1",
    "dotenv": "^10.0.0",
    "dotenv-webpack": "^7.0.2",
    "enzyme": "^3.11.0",
    "eslint": "^7.27.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-config-react-app": "^6.0.0",
    "eslint-plugin-flowtype": "^5.7.2",
    "eslint-plugin-import": "^2.23.4",
    "eslint-plugin-react-hooks": "^4.2.0",
    "fast-csv": "^4.3.6",
    "html-metadata": "^1.7.1",
    "jest": "^27.0.4",
    "lighthouse": "^8.5.1",
    "lint-staged": "^11.0.0",
    "lmdb-store": "^1.6.11",
    "lost": "^8.3.1",
    "mocha": "^9.1.3",
    "pa11y": "^6.0.1",
    "postcss": "^8.3.5",
    "postcss-calc": "^8.0.0",
    "postcss-cli": "^8.3.1",
    "postcss-easy-import": "^3.0.0",
    "postcss-mixins": "^6.2.3",
    "postcss-preset-env": "^6.7.0",
    "postcss-rem": "^2.0.1",
    "prettier": "^2.3.0",
    "react-test-renderer": "^17.0.2",
    "replace": "^1.2.1",
    "start-server-and-test": "^1.12.1",
    "stylelint": "^13.13.1",
    "stylelint-config-prettier": "^8.0.2",
    "stylelint-config-standard": "^22.0.0",
    "webpack": "^5.39.0"
  },
  "browserslist": [
    "defaults"
  ]
}

Environment

System:
    OS: macOS 12.4
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.3.0 - ~/.nvm/versions/node/v16.3.0/bin/node
    Yarn: 1.22.17 - ~/.nvm/versions/node/v14.18.3/bin/yarn
    npm: 7.15.1 - ~/.nvm/versions/node/v16.3.0/bin/npm
  Browsers:
    Chrome: 103.0.5060.134
    Firefox: 101.0.1
    Safari: 15.5
  npmPackages:
    gatsby: ^4.0.0 => 4.0.0
    gatsby-plugin-algolia: ^0.26.0 => 0.26.0
    gatsby-plugin-bugherd: ^1.0.2 => 1.0.2
    gatsby-plugin-canonical-urls: ^4.19.0 => 4.19.0
    gatsby-plugin-google-gtag: ^4.19.0 => 4.19.0
    gatsby-plugin-google-tagmanager: ^4.19.0 => 4.19.0
    gatsby-plugin-image: ^2.19.0 => 2.19.0
    gatsby-plugin-manifest: ^4.19.0 => 4.19.0
    gatsby-plugin-postcss: ^5.19.0 => 5.19.0
    gatsby-plugin-react-helmet: ^5.19.0 => 5.19.0
    gatsby-plugin-robots-txt: ^1.7.1 => 1.7.1
    gatsby-plugin-rollbar: ^1.1.0 => 1.1.0
    gatsby-plugin-rollbar-deploy: ^1.0.0 => 1.0.0
    gatsby-plugin-s3: ^0.3.8 => 0.3.8
    gatsby-plugin-sass: ^5.19.0 => 5.19.0
    gatsby-plugin-sharp: ^4.19.0 => 4.19.0
    gatsby-plugin-svgr: ^3.0.0-beta.0 => 3.0.0-beta.0
    gatsby-remark-images-contentful: ^5.1.0 => 5.4.0
    gatsby-source-contentful: ^6.1.4 => 6.1.4
    gatsby-source-filesystem: ^3.14.0 => 3.14.0
    gatsby-source-sanity: ^7.0.7 => 7.3.2
    gatsby-transformer-sharp: ^3.14.0 => 3.14.0
    gatsby-transformer-sqip: ^4.1.4 => 4.12.1

[aaronadamsCA]

@sqpollen I responded to gatsbyjs/gatsby#36210 as I encountered the same issue. It's a Gatsby problem. They should reopen the issue.

You can work around it for now by pinning gatsby-link to 4.18.1, as the bad import was introduced in 4.19 and above.

[sqpollen]

appreciate the help @aaronadamsCA - will close now.