gatsby: Cannot find @reach/router in gatsby-link

Description

Migrated to gatsby 3, now getting this issue

Error in "C:\projects\onlixe\blog-insiders\insiders-template-react\gatsby-node.js": Cannot find module '@reach/router'
Require stack:
- C:\projects\onlixe\blog-insiders\insiders-template-react\node_modules\gatsby-link\index.js
- C:\projects\onlixe\blog-insiders\insiders-template-react\node_modules\gatsby\cache-dir\commonjs\gatsby-browser-entry.js
- C:\projects\onlixe\blog-insiders\insiders-template-react\gatsby-node.js
- C:\projects\onlixe\blog-insiders\insiders-template-react\node_modules\gatsby\dist\bootstrap\resolve-module-exports.js
- C:\projects\onlixe\blog-insiders\insiders-template-react\node_modules\gatsby\dist\bootstrap\load-plugins\validate.js
- C:\projects\onlixe\blog-insiders\insiders-template-react\node_modules\gatsby\dist\bootstrap\load-plugins\load.js
- C:\projects\onlixe\blog-insiders\insiders-template-react\node_modules\gatsby\dist\bootstrap\load-plugins\index.js
- C:\projects\onlixe\blog-insiders\insiders-template-react\node_modules\gatsby\dist\services\initialize.js
- C:\projects\onlixe\blog-insiders\insiders-template-react\node_modules\gatsby\dist\services\index.js
- C:\projects\onlixe\blog-insiders\insiders-template-react\node_modules\gatsby\dist\state-machines\develop\services.js
- C:\projects\onlixe\blog-insiders\insiders-template-react\node_modules\gatsby\dist\state-machines\develop\index.js
- C:\projects\onlixe\blog-insiders\insiders-template-react\node_modules\gatsby\dist\commands\develop-process.js
- C:\projects\onlixe\blog-insiders\insiders-template-react\.cache\tmp-23300-an3qIDriMlhr



  Error: Cannot find module '@reach/router'
  Require stack:
  - C:\projects\onlixe\blog-insiders\insiders-template-react\node_modules\gatsby-link\index.js
  - C:\projects\onlixe\blog-insiders\insiders-template-react\node_modules\gatsby\cache-dir\commonjs\gatsby-browser-entry.js
  - C:\projects\onlixe\blog-insiders\insiders-template-react\gatsby-node.js
  - C:\projects\onlixe\blog-insiders\insiders-template-react\node_modules\gatsby\dist\bootstrap\resolve-module-exports.js
  - C:\projects\onlixe\blog-insiders\insiders-template-react\node_modules\gatsby\dist\bootstrap\load-plugins\validate.js
  - C:\projects\onlixe\blog-insiders\insiders-template-react\node_modules\gatsby\dist\bootstrap\load-plugins\load.js
  - C:\projects\onlixe\blog-insiders\insiders-template-react\node_modules\gatsby\dist\bootstrap\load-plugins\index.js
  - C:\projects\onlixe\blog-insiders\insiders-template-react\node_modules\gatsby\dist\services\initialize.js
  - C:\projects\onlixe\blog-insiders\insiders-template-react\node_modules\gatsby\dist\services\index.js
  - C:\projects\onlixe\blog-insiders\insiders-template-react\node_modules\gatsby\dist\state-machines\develop\services.js
  - C:\projects\onlixe\blog-insiders\insiders-template-react\node_modules\gatsby\dist\state-machines\develop\index.js
  - C:\projects\onlixe\blog-insiders\insiders-template-react\node_modules\gatsby\dist\commands\develop-process.js
  - C:\projects\onlixe\blog-insiders\insiders-template-react\.cache\tmp-23300-an3qIDriMlhr

  - loader.js:794 Function.Module._resolveFilename
    internal/modules/cjs/loader.js:794:15

  - loader.js:687 Function.Module._load
    internal/modules/cjs/loader.js:687:27

  - loader.js:849 Module.require
    internal/modules/cjs/loader.js:849:19

  - v8-compile-cache.js:159 require
    [insiders-template-react]/[v8-compile-cache]/v8-compile-cache.js:159:20

  - index.js:22 Object.<anonymous>
    [insiders-template-react]/[gatsby-link]/index.js:22:15

  - v8-compile-cache.js:192 Module._compile
    [insiders-template-react]/[v8-compile-cache]/v8-compile-cache.js:192:30

  - loader.js:973 Object.Module._extensions..js
    internal/modules/cjs/loader.js:973:10

  - loader.js:812 Module.load
    internal/modules/cjs/loader.js:812:32

  - loader.js:724 Function.Module._load
    internal/modules/cjs/loader.js:724:14

  - loader.js:849 Module.require
    internal/modules/cjs/loader.js:849:19

  - v8-compile-cache.js:159 require
    [insiders-template-react]/[v8-compile-cache]/v8-compile-cache.js:159:20

  - gatsby-browser-entry.js:15 Object.<anonymous>
    [insiders-template-react]/[gatsby]/cache-dir/commonjs/gatsby-browser-entry.js:15:43

  - v8-compile-cache.js:192 Module._compile
    [insiders-template-react]/[v8-compile-cache]/v8-compile-cache.js:192:30

  - loader.js:973 Object.Module._extensions..js
    internal/modules/cjs/loader.js:973:10

  - loader.js:812 Module.load
    internal/modules/cjs/loader.js:812:32

  - loader.js:724 Function.Module._load
    internal/modules/cjs/loader.js:724:14


not finished load plugins - 0.999s

error Command failed with exit code 1.

Environment

System:
    OS: Windows 10 10.0.18363
    CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
  Binaries:
    Node: 12.13.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.5 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.12.0 - C:\Program Files\nodejs\npm.CMD
  Languages:
    Python: 3.9.1 - /c/Users/Artem Shteltser/AppData/Local/Programs/Python/Python39/python
  Browsers:
    Edge: Spartan (44.18362.449.0)
  npmPackages:
    gatsby: ^3.0.0 => 3.0.0
    gatsby-image: ^3.0.0 => 3.0.0
    gatsby-link: ^3.0.0 => 3.0.0
    gatsby-plugin-emotion: ^6.0.0 => 6.0.0
    gatsby-plugin-env-variables: ^2.0.0 => 2.0.0
    gatsby-plugin-eslint: ^3.0.0 => 3.0.0
    gatsby-plugin-google-fonts: ^1.0.1 => 1.0.1
    gatsby-plugin-manifest: ^3.0.0 => 3.0.0
    gatsby-plugin-module-resolver: ^1.0.3 => 1.0.3
    gatsby-plugin-offline: ^4.0.0 => 4.0.0
    gatsby-plugin-portal: ^1.0.7 => 1.0.7
    gatsby-plugin-postcss: ^4.0.0 => 4.0.0
    gatsby-plugin-react-helmet: ^4.0.0 => 4.0.0
    gatsby-plugin-sharp: ^3.0.0 => 3.0.0
    gatsby-plugin-sitemap: ^3.0.0 => 3.0.0
    gatsby-source-filesystem: ^3.0.0 => 3.0.0
    gatsby-source-graphql: ^3.0.0 => 3.0.0
    gatsby-transformer-sharp: ^3.0.0 => 3.0.0

About this issue

  • Original URL
  • State: closed
  • Created 3 years ago
  • Comments: 23 (13 by maintainers)

Most upvoted comments

hey I’m still facing this issue, can someone help me? I did deleted node_modules, package-lock.json and .cache and try to re-install npm install but it’s not working

I followed the instruction from here

Install a starter gatsby new my-wordpress-gatsby-site https://github.com/gatsbyjs/gatsby-starter-wordpress-blog

Screen Shot 2022-04-21 at 22 06 12 Screen Shot 2022-04-21 at 22 06 46 Screen Shot 2022-04-21 at 22 06 53
+5
ichsanindraw on Apr 21, 2022

Confirmed this fixes my local install, HOWEVER, if you import { useLocation } from "@reach/router"; in a component (say in an SEO component to set the og:url property) it will still complain Can't resolve '@reach/router' in '/path/to/your/component'. Changing your reference to import { useLocation } from "@gatsbyjs/reach-router"; will fix it, but typescript will complain about no type definitions for @gatsbyjs/reach-router can we fix that?

+3
fshowalter on Mar 5, 2021

Published in gatsby-link@3.0.1, gatsby-react-router-scroll@4.0.1, gatsby@3.0.3

+1
vladar on Mar 5, 2021

Dug deeper. Looks like gatsby-plugin-linaria is removing the alias https://github.com/cometkim/gatsby-plugin-linaria/blob/e011a14eda9c7da99ab553aada921dffc2fdf5a6/src/gatsby-node.ts#L53. I’ve opened an issue here: https://github.com/cometkim/gatsby-plugin-linaria/issues/19#issuecomment-791614220

Other plugins may be doing similar shenanigans.

+1
fshowalter on Mar 5, 2021
Read more comments on GitHub
← gatsby: Cannot find module 'gatsby-cli/lib/reporter'
gatsby: Cannot query field "allMarkdownRemark" on type "Query". →