Gatsby: [V2] dependency missing react-router-dom in gatsby-link

[mishasaggi]

Description

I updated my V2 gatsby version today on a working project, after that the compile failed on a missing dependency error.

Steps to reproduce

Update gatsby on a working repo from a previous version(mine was ^2.0.0-beta.54 to ^2.0.0-beta.99)

Expected result

Gatsby project should complile without errors

Actual result

On compile it throws the following error

 ERROR  Failed to compile with 1 errors                                                        17:06:47

This dependency was not found:

* react-router-dom in ./node_modules/gatsby-link/index.js

To install it, you can run: npm install --save react-router-dom
✖ ｢wdm｣: 
ERROR in ./node_modules/gatsby-link/index.js
Module not found: Error: Can't resolve 'react-router-dom' in '/home/monisha/code/edison-app-web/node_modules/gatsby-link'
 @ ./node_modules/gatsby-link/index.js 36:22-49
 @ ./src/pages/index.js
 @ ./.cache/sync-requires.js
 @ ./.cache/app.js
 @ multi ./node_modules/react-hot-loader/patch.js (webpack)-hot-middleware/client.js?path=http://localhost:8000/__webpack_hmr&reload=true&overlay=false ./.cache/app
ℹ ｢wdm｣: Failed to compile.

Environment

  System:
    OS: Linux 4.4 Ubuntu 16.04.4 LTS (Xenial Xerus)
    CPU: x64 Intel(R) Core(TM) i7-8550U CPU @ 1.80GHz
    Shell: 4.3.48 - /bin/bash
  Binaries:
    Node: 8.11.3 - /usr/bin/node
    Yarn: 1.7.0 - /usr/bin/yarn
    npm: 6.2.0 - /usr/bin/npm
  Browsers:
    Chrome: 67.0.3396.99
  npmPackages:
    gatsby: ^2.0.0-beta.99 => 2.0.0-beta.99 
    gatsby-link: ^1.6.40 => 1.6.40 
    gatsby-plugin-google-analytics: ^1.0.31 => 1.0.31 
    gatsby-plugin-react-helmet: ^2.0.10 => 2.0.10 
    gatsby-source-contentful: ^1.3.54 => 1.3.54 
  npmGlobalPackages:
    gatsby-cli: 1.1.58

File contents (if changed)

gatsby-config.js: N/A
package.json: N/A
gatsby-node.js: N/A
gatsby-browser.js: N/A
gatsby-ssr.js: N/A

[m-allanson]

The newer Gatsby betas have switched over from React Router to Reach Router as it's smaller and has built in accessibility features. It looks like you've updated Gatsby but not your related plugins.

I think the following should fix up the error you're seeing:

• update your plugins to the latest next versions
• then switch to importing the Link component from "gatsby" instead of "gatsby-link".

Check out the migration guide for more info on all the above, there are some other changes you may need to make as you work through the guide.

[staticfrost]

Documentation needs to be updated to fix this issue -
https://next.gatsbyjs.org/tutorial/part-one/#linking-between-pages

[thescientist13]

I'm seeing this as well, updating to the newest v2 release, coming from ^2.0.0-beta.61, for my unit tests.

$ yarn why react-router-dom
yarn why v1.7.0
[1/4] 🤔  Why do we have the module "react-router-dom"...?
[2/4] 🚚  Initialising dependency graph...
[3/4] 🔍  Finding dependency...
[4/4] 🚡  Calculating file sizes...
=> Found "[email protected]"
info Reasons this module exists
   - "gatsby" depends on it
   - Hoisted from "gatsby#react-router-dom"
info Disk size without dependencies: "148MB"
info Disk size with unique dependencies: "668MB"
info Disk size with transitive dependencies: "11.79GB"
info Number of shared dependencies: 20
✨  Done in 1.50s.

$ yarn add gatsby --dev
yarn add v1.7.0
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning " > [email protected]" has incorrect peer dependency "react@^16.4.2".
warning " > [email protected]" has incorrect peer dependency "react-dom@^16.4.2".
[4/4] 📃  Building fresh packages...
success Saved lockfile.
success Saved 31 new dependencies.
info Direct dependencies
└─ [email protected]
info All dependencies
├─ @babel/[email protected]
├─ @babel/[email protected]
├─ @types/[email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
└─ [email protected]
✨  Done in 13.17s.

$ yarn test
 ...

 ● Test suite failed to run

    Cannot find module 'react-router-dom' from 'blog.spec.jsx'


$ yarn why react-router-dom
yarn why v1.7.0
[1/4] 🤔  Why do we have the module "react-router-dom"...?
[2/4] 🚚  Initialising dependency graph...
[3/4] 🔍  Finding dependency...
error We couldn't find a match!
✨  Done in 1.29s.

This was being required to pull in MemoryRouter from my unit test

import * as React from 'react';
import { mount, configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import { MemoryRouter } from 'react-router-dom';
import Header from './header';

configure({ adapter: new Adapter() });

describe('Header Component', () => {
  let header;

  beforeEach(() => {
    header = mount(
      <MemoryRouter>
        <Header/>
      </MemoryRouter>
    ).children();
  });

  it('should not be null', () => {
    expect(header).not.toBeNull();
    expect(header.find('.header').length).toEqual(1);
  });

  it('should have a <header> element', () => {
    expect(header.find('header').length).toEqual(1);
  });

  it('should have <h2> element with text', () => {
    const heading = header.find('h2');

    expect(heading.length).toEqual(1);
    expect(heading.text()).toEqual('A DREAMER BY DESIGN');
  });

  it('should have a link to the home page', () => {
    const link = header.find('Link');

    expect(link.length).toEqual(1);
    expect(link.prop('to').pathname).toEqual('/');
  });

});

I recall this was a suggestion from some of the testing conversations at the time.

If I try and install react-router-dom manually, I get errors like this

   Enzyme Internal Error: unknown node with tag 12

      11 |
      12 |   beforeEach(() => {
    > 13 |     about = mount(
         |             ^
      14 |       <MemoryRouter>
      15 |         <Header/>
      16 |       </MemoryRouter>

@m-allanson
Is there a similar concept in Reach Router, to replace the usage of <MemoryRouter>?

[m-allanson]

Hey @thescientist13, experimenting with your tests is looks like you can just plain remove MemoryRouter and the react-router-dom import.

However, in a related problem I wasn't able to get your header and navigation specs to find the Link component - not sure what's happening there.

[thescientist13]

Thanks @m-allanson for your advice.

So I removed references to MemoryRouter and react-router-dom

Before

beforeEach(() => {
  header = mount(
    <MemoryRouter>
      <Header/>
    </MemoryRouter>
  ).children();
});

After

beforeEach(() => {
  header = mount(
     <Header/>
  );
});

But still get that same error about unknown node

  ● Header Component › should have <h2> element with text

    TypeError: Cannot read property 'find' of undefined

      25 |
      26 |   it('should have <h2> element with text', () => {
    > 27 |     const heading = header.find('h2');
         |                            ^
      28 |
      29 |     expect(heading.length).toEqual(1);
      30 |     expect(heading.text()).toEqual('A DREAMER BY DESIGN');

      at Object.<anonymous> (src/components/header/header.spec.jsx:27:28)

  ● Header Component › should have a link to the home page

    Enzyme Internal Error: unknown node with tag 12

So I found this issue and installed latest version of enzyme-adapter-react-16 which helped fix it! 🎉

Now I am just down to these kinds of errors, which I think is what you're seeing too?

 ● Navigation Component › About link › should only have one About link

    expect(received).toBe(expected) // Object.is equality

    Expected: 1
    Received: 0

      47 |
      48 |     it('should only have one About link', () => {
    > 49 |       expect(aboutLink.length).toBe(1);
         |                                ^
      50 |     });
      51 |
      52 |     it('<Link> component should say About', () => {

      at Object.<anonymous> (src/components/navigation/navigation.spec.jsx:49:32)

  ● Navigation Component › About link › <Link> component should say About

    Method “text” is only meant to be run on a single node. 0 found instead.

      51 |
      52 |     it('<Link> component should say About', () => {
    > 53 |       expect(aboutLink.text()).toEqual('About');
         |                        ^
      54 |     });
      55 |
      56 |     it('should link to the About page', () => {

      at ReactWrapper.single (node_modules/enzyme/build/ReactWrapper.js:1532:17)
      at ReactWrapper.text (node_modules/enzyme/build/ReactWrapper.js:798:21)
      at Object.<anonymous> (src/components/navigation/navigation.spec.jsx:53:24)

Will keep plugging away, let me know if you have any other thoughts. I recall MemoryRouter was what helped solve this in the first place (with Link) so not sure if there's a similar mechanism to invoke in the new implementation?

[gatsbot[bot]]

Old issues will be closed after 30 days of inactivity. This issue has been quiet for 20 days and is being marked as stale. Reply here or add the label "not stale" to keep this issue open!

[gatsbot[bot]]

This issue is being closed due to inactivity. Is this a mistake? Please re-open this issue or create a new issue.