Gatsby: Generating SSR bundle failed - Can't resolve 'gatsby-link' in 'xxx/.cache'

Created on 12 Jul 2020 · 22Comments · Source: gatsbyjs/gatsby

Description

When I try to run gatsby build or gatsby develop I keep running into the following issue

Generating SSR bundle failed

Can't resolve 'gatsby-link' in 'xxx/.cache'

If you're trying to use a package make sure that 'gatsby-link' is installed. If you're trying to use a local file make sure that the path is correct.

File: .cache/gatsby-browser-entry.js

Steps to reproduce

This is project that has been working for a few months and I've updated yesterday and now I'm getting the above error message

Expected result

Should be able to run gatsby build and gatsby develop with no errors

Actual result

Error mentioned above

Environment

  System:
    OS: macOS 10.15.3
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 14.5.0 - ~/.nvm/versions/node/v14.5.0/bin/node
    Yarn: 1.22.4 - ~/.yvm/shim/yarn
    npm: 6.14.5 - ~/.nvm/versions/node/v14.5.0/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 83.0.4103.116
    Edge: 83.0.478.61
    Firefox: 76.0
    Safari: 13.0.5

awaiting author response bug

Source

tommaton

👍6

Most helpful comment

@domjtalbot on [email protected] had exactly the same issue and yarn adding gatsby-link and gatsby-react-router-scroll as direct dependencies solved the issue. Not sure why this is happening, but glad to see that it's not just me.

josephmarkus on 14 Jul 2020

👍3

All 22 comments

Have you tried deleting the node-modules folder and the package-lock.json file, running gatsby clean, followed by npm install or yarn? That usually does the trick for me with cache issues, frustrating when they pop up for seemingly no reason out of nowhere!

greenlightjohnny on 12 Jul 2020

Have you tried deleting the node-modules folder and the package-lock.json file, running gatsby clean, followed by npm install or yarn? That usually does the trick for me with cache issues, frustrating when they pop up for seemingly no reason out of nowhere!

@greenlightjohnny - yep, this is how it all come about there was an error in our pipeline and the only way to replicate was to clear all of what you mentioned and reinstall it. And now our pipelines are failing and the latest code and content cant be deployed :(

tommaton on 12 Jul 2020

Just had exact same issue.
This happened after I installed @reach/router (I needed the <Redirect /> component)
First I deleted .cache and node_modules and ran yarn install - without any effect.
Then yarn add gatsby-link and now the error message was Can't resolve 'gatsby-react-router-scroll' in 'xxx/.cache'

Then yarn add gatsby-react-router-scroll - Now it works

jonasdev on 13 Jul 2020

Could these be related - https://github.com/gatsbyjs/gatsby/issues/25554#issuecomment-655094319 ?

josephmarkus on 13 Jul 2020

What does yarn why gatsby say? and yarn why gatsby-react-router-scroll ?

blainekasten on 13 Jul 2020

Same error as in the main message. If I add yarn add gatsby-link, then, just like @jonaskkristensen I get

 ERROR #98124  WEBPACK

Generating development JavaScript bundle failed

Can't resolve 'gatsby-react-router-scroll' in '/Users/[...]/.cache'

If you're trying to use a package make sure that 'gatsby-react-router-scroll' is installed. If you're trying to use a local file make sure that the path is correct.

File: .cache/root.js

failed Building development bundle - 17.241s

Both .cache/gatsby-browser-entry.js and .cache/root.js

these are:

https://github.com/gatsbyjs/gatsby/blob/73ebb1efce2a3c077acdd1033242c651f418d8c8/packages/gatsby/cache-dir/gatsby-browser-entry.js

and

https://github.com/gatsbyjs/gatsby/blob/205847b833c5f7783182ea54a3ddd72f6369ee47/packages/gatsby/cache-dir/root.js

I don't see anything there.

It does feel like something internally is relying on both gatsby-link and 'gatsby-react-router-scroll and they're not listed as dependencies. Now, where that is, I've no idea.

josephmarkus on 13 Jul 2020

@josephmarkus those are both dependencies of gatsby itself. What does the yarn why say for this? or npm ls if you use npm.

blainekasten on 13 Jul 2020

@blainekasten I haven't added gatsby-link directly

yarn why gatsby                                                                                                                                     TSTP ✘  35m 37s       12.18.2 ⬢  
yarn why v1.21.1
[1/4] 🤔  Why do we have the module "gatsby"...?
[2/4] 🚚  Initialising dependency graph...
warning Resolution field "[email protected]" is incompatible with requested version "xstate@^4.11.0"
warning Resolution field "[email protected]" is incompatible with requested version "xstate@^4.11.0"
warning Resolution field "[email protected]" is incompatible with requested version "xstate@^4.11.0"
[3/4] 🔍  Finding dependency...
[4/4] 🚡  Calculating file sizes...
=> Found "[email protected]"
info Has been hoisted to "gatsby"
info This module exists because it's specified in "dependencies".
info Disk size without dependencies: "141.59MB"
info Disk size with unique dependencies: "141.59MB"
info Disk size with transitive dependencies: "141.59MB"
info Number of shared dependencies: 821
✨  Done in 3.32s.

yarn why gatsby-link                                                                                                                                          ✔  4s       12.18.2 ⬢  
yarn why v1.21.1
[1/4] 🤔  Why do we have the module "gatsby-link"...?
[2/4] 🚚  Initialising dependency graph...
warning Resolution field "[email protected]" is incompatible with requested version "xstate@^4.11.0"
warning Resolution field "[email protected]" is incompatible with requested version "xstate@^4.11.0"
warning Resolution field "[email protected]" is incompatible with requested version "xstate@^4.11.0"
[3/4] 🔍  Finding dependency...
[4/4] 🚡  Calculating file sizes...
=> Found "[email protected]"
info Reasons this module exists
   - "gatsby" depends on it
   - Hoisted from "gatsby#gatsby-link"
✨  Done in 1.22s.

EDIT

But actually scroll is there as well

yarn why gatsby-react-router-scroll                                                                                                                                   ✔     12.18.2 ⬢  
yarn why v1.21.1
[1/4] 🤔  Why do we have the module "gatsby-react-router-scroll"...?
[2/4] 🚚  Initialising dependency graph...
warning Resolution field "[email protected]" is incompatible with requested version "xstate@^4.11.0"
warning Resolution field "[email protected]" is incompatible with requested version "xstate@^4.11.0"
warning Resolution field "[email protected]" is incompatible with requested version "xstate@^4.11.0"
[3/4] 🔍  Finding dependency...
[4/4] 🚡  Calculating file sizes...
=> Found "[email protected]"
info Reasons this module exists
   - "gatsby" depends on it
   - Hoisted from "gatsby#gatsby-react-router-scroll"
✨  Done in 1.25s.

VladFiliucov on 13 Jul 2020

Try updating to latest? 2.24.2

blainekasten on 13 Jul 2020

@blainekasten tried updating to latest gatsby, but getting this issue (that I noticed you've just closed) https://github.com/gatsbyjs/gatsby/issues/25554

Despite that, locally, I bumped gatsby to latest version - 2.24.2, but it's showing the same error

yarn why results:

yarn why gatsby
=> Found "[email protected]"
info Has been hoisted to "gatsby"
info This module exists because it's specified in "dependencies".

yarn why gatsby-react-router-scroll
=> Found "[email protected]"
info Reasons this module exists
   - "gatsby" depends on it
   - Hoisted from "gatsby#gatsby-react-router-scroll"

yarn why gatsby-link
=> Found "[email protected]"
info Reasons this module exists
   - "gatsby" depends on it

josephmarkus on 13 Jul 2020

You bumped to 2.24.2 but yarn why gatsby still reports [email protected] ? That sounds like you are having some issues with your node_modules..

blainekasten on 13 Jul 2020

@blainekasten I upgraded to 2.24.2 previously while attempting various resolutions to the issue. The result of yarn why gatsby contains an earlier version of gatsby that doesn't have the issue #25554

josephmarkus on 14 Jul 2020

I encountered the same issues after updating to 2.24.2.
Adding gatsby-link and gatsby-react-router-scroll as dependencies solved it for me.

Before that yarn why showed:

➜ yarn why gatsby
└─ ...@workspace:.
   └─ gatsby@npm:2.24.2 [1fac5] (via npm:^2.24.2 [1fac5])

➜ yarn why gatsby-react-router-scroll
├─ gatsby@npm:2.24.2
│  └─ gatsby-react-router-scroll@npm:3.0.11 (via npm:^3.0.11)
│
└─ gatsby@npm:2.24.2 [1fac5]
   └─ gatsby-react-router-scroll@npm:3.0.11 [ce2f8] (via npm:^3.0.11 [ce2f8])

➜ yarn why gatsby-link
├─ gatsby@npm:2.24.2
│  └─ gatsby-link@npm:2.4.12 (via npm:^2.4.12)
│
└─ gatsby@npm:2.24.2 [1fac5]
   └─ gatsby-link@npm:2.4.12 [ce2f8] (via npm:^2.4.12 [ce2f8])

Gatsby build showed:

ERROR #98124  WEBPACK
Generating JavaScript bundles failed
Can't resolve 'gatsby-link' in '/Users/.../.cache'

If you're trying to use a package make sure that 'gatsby-link' is installed.
If you're trying to use a local file make sure that the path is correct.

File: .cache/navigation.js


ERROR #98124  WEBPACK
Generating JavaScript bundles failed
Can't resolve 'gatsby-link' in '/Users/.../.cache'

If you're trying to use a package make sure that 'gatsby-link' is installed.
If you're trying to use a local file make sure that the path is correct.

File: .cache/gatsby-browser-entry.js


ERROR #98124  WEBPACK
Generating JavaScript bundles failed
Can't resolve 'gatsby-react-router-scroll' in '/Users/.../.cache'

If you're trying to use a package make sure that 'gatsby-react-router-scroll' is installed.
If you're trying to use a local file make sure that the path is correct.

File: .cache/production-app.js

domjtalbot on 14 Jul 2020

josephmarkus on 14 Jul 2020

👍3

fwiw, I'm also experiencing this on [email protected]

I think it might have to do with one or more sub-dependencies also requiring gatsby, but a different version.

```sh
$ yarn why gatsby

=> Found "[email protected]"
info Has been hoisted to "gatsby"
info This module exists because it's specified in "dependencies".
info Disk size without dependencies: "255.89MB"
info Number of shared dependencies: 872

=> Found "gatsby-theme-docz#[email protected]"
info This module exists because "gatsby-theme-docz" depends on it.
info Disk size without dependencies: "2.56MB"
info Number of shared dependencies: 867

=> Found "docz#[email protected]"
info This module exists because "docz" depends on it.
info Disk size without dependencies: "7.05MB"
info Number of shared dependencies: 867

=> Found "halo#[email protected]"
info Reasons this module exists

"halo" depends on it
Hoisted from "halo#gatsby-theme-docz#gatsby"
info Disk size without dependencies: "7.44MB"
info Number of shared dependencies: 86

drewlustro on 15 Jul 2020

This is maddening.

I am had a similar issue, except with core-js not being found in my cache. I removed my yarn.lock and package-lock.json files, upgraded gatsby to 2.24.2. gatsby develop now works fine, but gatsby build is now throwing the error referenced here: #23542

  TypeError: promise.finally is not a function

  - query-runner.js:62 graphql
    [webops-bcov-next]/[gatsby]/dist/query/query-runner.js:62:20

  - query-runner.js:75 queryRunner
    [webops-bcov-next]/[gatsby]/dist/query/query-runner.js:75:20

  - queue.js:39 Worker.handler [as fn]
    [webops-bcov-next]/[gatsby]/dist/query/queue.js:39:19

  - worker.js:69 Worker.start
    [webops-bcov-next]/[better-queue]/lib/worker.js:69:29

  - queue.js:701 Queue._startBatch
    [webops-bcov-next]/[better-queue]/lib/queue.js:701:12

  - queue.js:567 
    [webops-bcov-next]/[better-queue]/lib/queue.js:567:12

  - better-queue-custom-store.js:180 Object.getLock
    [webops-bcov-next]/[gatsby]/dist/query/better-queue-custom-store.js:180:7

  - queue.js:533 
    [webops-bcov-next]/[better-queue]/lib/queue.js:533:17

  - better-queue-custom-store.js:128 Object.takeFirstN
    [webops-bcov-next]/[gatsby]/dist/query/better-queue-custom-store.js:128:7

  - queue.js:473 Queue._getNextBatch
    [webops-bcov-next]/[better-queue]/lib/queue.js:473:54

  - queue.js:530 Queue._processNext
    [webops-bcov-next]/[better-queue]/lib/queue.js:530:8

  - queue.js:520 
    [webops-bcov-next]/[better-queue]/lib/queue.js:520:12

  - queue.js:26 Queue.self.precondition
    [webops-bcov-next]/[better-queue]/lib/queue.js:26:60

  - queue.js:511 Queue._processNextIfAllowed
    [webops-bcov-next]/[better-queue]/lib/queue.js:511:8

  - queue.js:484 Immediate.<anonymous>
    [webops-bcov-next]/[better-queue]/lib/queue.js:484:12

  - timers.js:439 processImmediate
    internal/timers.js:439:21```

Gatsby Config:
```const path = require('path')

require('dotenv').config({
  path: `.env.${process.env.NODE_ENV}`,
})

module.exports = {
  siteMetadata: {
    title: `Brightcove Static`,
    description: `Brightcove pages, faster.`,
    author: `Brightcove`,
    siteUrl: `https://awesome-davinci-a8bdc7.netlify.com/`,
  },
  plugins: [
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sass`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#663399`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `src/images/favicon.png`, // This path is relative to the root of the site.
      },
    },
    {
      resolve: `gatsby-source-contentful`,
      options: {
        spaceId: `ov6oufbwq1qf`,
        accessToken: `${process.env.CONTENTFUL_ACCESS_TOKEN}`,
        host: `preview.contentful.com`,
      },
    },
    {
      resolve: `gatsby-plugin-sitemap`,
      options: {
        sitemapSize: 5000,
      },
    },
    `gatsby-plugin-netlify`,
    {
      resolve: `gatsby-plugin-create-client-paths`,
      options: { prefixes: [`/preview/*`] },
    },
    {
      resolve: 'gatsby-plugin-root-import',
      options: {
        src: path.join(__dirname, 'src'),
        pages: path.join(__dirname, 'src/pages'),
        components: path.join(__dirname, 'src/components'),
      },
    },
  ],
}

Package Dependencies:
"dependencies": { "@brightcove/react-player-loader": "^1.4.0", "@contentful/rich-text-from-markdown": "^13.4.0", "@contentful/rich-text-html-renderer": "^13.4.0", "@contentful/rich-text-react-renderer": "^13.4.0", "@elastic/react-search-ui": "^1.3.2", "@elastic/search-ui-app-search-connector": "^1.3.2", "axios": "^0.19.2", "contentful": "^7.14.5", "core-js": "^3.6.5", "dotenv": "^8.2.0", "gatsby": "2.24.2", "gatsby-image": "^2.2.34", "gatsby-plugin-canonical-urls": "^2.1.20", "gatsby-plugin-create-client-paths": "^2.3.9", "gatsby-plugin-google-tagmanager": "^2.1.25", "gatsby-plugin-manifest": "^2.2.31", "gatsby-plugin-netlify": "^2.3.9", "gatsby-plugin-offline": "^3.0.27", "gatsby-plugin-react-helmet": "^3.1.16", "gatsby-plugin-sass": "^2.1.29", "gatsby-plugin-sharp": "^2.3.5", "gatsby-plugin-sitemap": "^2.2.27", "gatsby-source-contentful": "^2.1.86", "gatsby-source-filesystem": "^2.1.40", "gatsby-transformer-sharp": "^2.3.7", "imagemin-pngquant": "^5.0.1", "js-yaml": "^3.13.1", "markdown-to-jsx": "^6.11.4", "node-fetch": "^2.6.0", "node-sass": "^4.13.1", "prop-types": "^15.7.2", "react": "^16.12.0", "react-dom": "^16.12.0", "react-helmet": "^5.2.1", "react-parallax": "^3.0.3", "react-scroll-parallax": "^2.3.1", "react-spring": "^8.0.27", "react-touch-carousel": "^0.9.3", "request-promise": "^4.2.5", "sharp": "^0.24.1" }, "devDependencies": { "eslint": "7.2.0", "eslint-config-airbnb": "18.2.0", "eslint-config-prettier": "^6.11.0", "eslint-loader": "^4.0.2", "eslint-plugin-import": "^2.21.2", "eslint-plugin-jsx-a11y": "^6.3.0", "eslint-plugin-prettier": "^3.1.4", "eslint-plugin-react": "^7.20.0", "eslint-plugin-react-hooks": "4.0.0", "gatsby-plugin-eslint": "^2.0.8", "gatsby-plugin-root-import": "^2.0.5", "husky": "^4.2.5", "jira-smart-commit": "^1.1.1", "lint-staged": ">=10", "prettier": "^1.19.1", "prettier-eslint": "^11.0.0" }

imnotdannorton on 21 Jul 2020

@imnotdannorton what version of node are you using? I think you might be on an old version that doesn't have .finally support on Promises.

blainekasten on 23 Jul 2020

@blainekasten I'd been using 12.9.1. We just fixed it this AM, turns out this combination:
```"gatsby": "2.24.2",
"gatsby-image": "^2.2.34",
"gatsby-plugin-canonical-urls": "^2.1.20",
"gatsby-plugin-create-client-paths": "^2.3.9",
"gatsby-plugin-google-tagmanager": "^2.1.25",
"gatsby-plugin-manifest": "^2.2.31",
"gatsby-plugin-netlify": "^2.3.9",
"gatsby-plugin-offline": "^3.0.27",
"gatsby-plugin-react-helmet": "^3.1.16",
"gatsby-plugin-sass": "^2.1.29",
"gatsby-plugin-sharp": "^2.3.5",
"gatsby-plugin-sitemap": "^2.2.27",
"gatsby-source-contentful": "^2.1.86",
"gatsby-source-filesystem": "^2.1.40",
"gatsby-transformer-sharp": "^2.3.7",


was the culprit. changing the configuration back to (mostly) default for the filesystem, sharp plugins, and gatsby fixed things:
```"gatsby": "^2.23.12",
    "gatsby-image": "^2.4.9",
    "gatsby-plugin-manifest": "^2.4.14",
    "gatsby-plugin-offline": "^3.2.13",
    "gatsby-plugin-react-helmet": "^3.3.6",
    "gatsby-plugin-sharp": "^2.6.14",
    "gatsby-source-filesystem": "^2.3.14",
    "gatsby-transformer-sharp": "^2.5.7",

Went through the process of cloning the default starter project, seeing what happened when swapping my package.json (failed), then adding/subtracting the different packages and version numbers until they worked.

imnotdannorton on 23 Jul 2020

Sounds great! Though I'm sorry that was such a complicated process :( dependency resolution seems to have been harder and harder lately..

I'm going to close this issue as it doesn't seem that there is any specific bug with Gatsby here. Just plenty of dependency resolution issues :( If we think there is something actionable for Gatsby to do here I'm all ears! Please feel free to keep responding even when the issue is closed. 💜

blainekasten on 23 Jul 2020

@blainekasten would it help to have particular dependency version information in the changelog? For example, "as of version gatsby 1.2.3 you will need to have to at least: gatsby-plugin-something-or-other 3.2.1 and gatsby-transformer-something-or-other 4.5.6 installed alongside it". What do you think?

josephmarkus on 28 Jul 2020

👍1

In my case this problem was caused by the way Yarn hoists dependencies if you're using its workspaces feature.

The workspace folder structure looks something like this:

package.json  // workspace root
node_modules
project-a
  package.json
  node_modules
  .config
project-b
  package.json
  node_modules
  .config

Because both project-a and project-b depend on the same version of gatsby, Yarn hoists it to the root node_modules. Because nothing else in the workspace depends on gatsby-link, Yarn installs that underneath gatsby. The result looks like this:

package.json
node_modules
  gatsby
    gatsby-link  // underneath `gatsby`
project-a
  .cache
  ...
project-b
  .cache
  ...

When project-a/.cache/whatever.js requires gatsby-link, the module isn't in scope because it isn't in the local project-a/node_modules and it's not visible in the root node_modules. That's why you can resolve the issue with yarn add gatsby-link in one or both of the projects - doing so will cause Yarn to hoist it into the top level of the root node_modules alongside gatsby, which brings it into scope. In other words, if you can get to this situation, it'll work:

package.json
node_modules
  gatsby
  gatsby-link  // parallel with `gatsby`
project-a
  .cache
  ...
project-b
  .cache
  ...

I think this could legitimately be called a Gatsby issue, because the files in the .cache folder are making assumptions Yarn doesn't recognise, though I'm not sure how'd you'd go about solving it.

elliotdavies on 17 Aug 2020

👍2

Having the same issue after upgrading to [email protected].
As mentioned in https://github.com/gatsbyjs/gatsby/issues/3069, not sure why gatsby-link isn't just included in the gatsby package?

same with the package gatsby-react-router-scroll.