Can't Resolve react-router-dom

[wuno]

I am using react-bootstrap and react-router in my React application. I installed react-router-bootstrap so I could use Nav.Item and LinkContainer for my routes. Originally when I set it all up I kept getting this error.

./node_modules/react-router-bootstrap/lib/LinkContainer.js
Module not found: Can't resolve 'react-router-dom' in '/Users/wuno/Dropbox/Hack/Devops/react/riverwalk-credit-web/node_modules/react-router-bootstrap/lib'

I left the computer alone for a bit came back and started up the server again, npm start and it worked fine. At this point I decided to do some refactoring which broke it again giving me the same error as mentioned above. At this point I set everything back to the last working state and the error was still there.

I checked the node_modules directory and I do not see a react-router-dom inside of the lib folder or where it is even referencing this. But when I check the repo on git there does seem to be a reference for the library inside of LinkContainer.

I am thinking this must be a bug but this is my first time using any of these tools. All my experience is with react-native.

index.js

import { Router, Route } from 'react-router';
<Router>
      <div>
        <Navigation />
        <Route exact path="/" component={HomeContainer} />
      </div>
    </Router>

Navigation

import { LinkContainer } from 'react-router-bootstrap';
  <LinkContainer to="/">
     <NavItem>Home</NavItem>
   </LinkContainer>

Error

./node_modules/react-router-bootstrap/lib/LinkContainer.js
Module not found: Can't resolve 'react-router-dom' in '/Users/wuno/Dropbox/Hack/Devops/react/riverwalk-credit-web/node_modules/react-router-bootstrap/lib'

[jquense]

Have you tried installing react-router-dom

[wuno]

I did try installing it. But that did not help. Also it worked for a a few minutes before I refactored without react-router-dom. So I am not sure why that would make a difference.

Is react-router-dom a dependency? It does not say that in the readme.md. If it is how would go about importing it to make it work with react-router-bootstrap?

[wuno]

Actually I just now got it to work. You were right that is what it needed but the import is like this,
import { BrowserRouter as Router, Route } from 'react-router-dom';

Thanks for your help. Is there docs anywhere explaining this?

[v12]

@wuno glad that you managed to resolve the issue you had.

Have a look at react-router's installation guide, which has a note about packages that should be used for development. You'd never reference react-router directly in your web application because react-router-dom is supposed to be used instead.

[princecharming519]

Hello, Web experts.
I just met a compile error like wuno.

I imported everything as the following.
import React, { Component } from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';

But still, error didn't resolve.
Failed to compile.

./src/App.js
Module not found: Can't resolve 'react-router-dom' in '/Volumes/Source....../src'
I don't know why it happened.

Please help me.

@princecharming519 , I assume you're using docker. If so, drop your images and recreate them. This solved my problem.

[babusng]

Hi please help to resolve my compile error.
while import react-router-dom getting error

Cannot find module 'react-router-dom'

[v12]

@babusng with the level of details you provided it's impossible to help you to resolve the issue.

My suggestion is to run npm install react-router-dom (or yarn add react-router-dom if you're using Yarn). Then check that the import is referencing package name, not path (i.e., it should be require('react-router-dom'), not require('./react-router-dom'))

[gselvamary]

index.js supposed to be like this

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { BrowserRouter as Router } from 'react-router-dom';

ReactDOM.render(, document.getElementById('root'));
serviceWorker.unregister();

[cyberDever]

Did you try to restart dev server?

[SommieDivy]

I got the same kind of error. Please how can I fix this as I am new to react?

[SommieDivy]

Here is the code:

[cyberDever]

did you install react, react-dom, react-router-dom?

If not, npm i react react-dom react-router-dom

[SommieDivy]

wow! thanks man. its been resolved