I'm running a REST API in a docker container. I'm working on building the pages and when I start the server I get:

Starting the development server...

Failed to pile.

./src/App.js
Module not found: Can't resolve 'react-router-dom' in '/usr/src/app/src'

When I refresh the browser, I see the following error Error: Cannot find module 'react-router-dom' I've tried every npm install I could find, because it seemed to be everyone's problem:

npm install -S react-router-dom
npm install react-router-dom --save
npm i react-router-dom --save

In package.json, I see the dependencies:

{
  "name": "app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "bootstrap": "^4.4.1",
    "react": "^16.13.1",
    "react-bootstrap": "^1.0.0",
    "react-dom": "^16.13.1",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.4.1",
    "styled-ponents": "^5.1.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

My app.js file:

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import { Home } from './Home';
import { Developers } from './Developers';
import { Pricing } from './Pricing';
import { Login } from './Login';
import { NoMatch } from './NoMatch';

class App extends Component {
  render() {
    return (
      <React.Fragment>
        <Router>
          <Switch>
            <Route exact path = "/" ponent={Home} />
            <Route path="/developers" ponent = {Developers} />
            <Route path="/pricing" ponent = {Pricing} />
            <Route path="/login" ponent = {Login} />
            <Route ponent={NoMatch} /> 
          </Switch>
        </Router>
      </React.Fragment>
    );
  }
}


export default App;

My index.js file

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(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this es with some pitfalls.

serviceWorker.unregister();

Any help is greatly appreciated!

I'm running a REST API in a docker container. I'm working on building the pages and when I start the server I get:

Starting the development server...

Failed to pile.

./src/App.js
Module not found: Can't resolve 'react-router-dom' in '/usr/src/app/src'

When I refresh the browser, I see the following error Error: Cannot find module 'react-router-dom' I've tried every npm install I could find, because it seemed to be everyone's problem:

npm install -S react-router-dom
npm install react-router-dom --save
npm i react-router-dom --save

In package.json, I see the dependencies:

{
  "name": "app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "bootstrap": "^4.4.1",
    "react": "^16.13.1",
    "react-bootstrap": "^1.0.0",
    "react-dom": "^16.13.1",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.4.1",
    "styled-ponents": "^5.1.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

My app.js file:

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import { Home } from './Home';
import { Developers } from './Developers';
import { Pricing } from './Pricing';
import { Login } from './Login';
import { NoMatch } from './NoMatch';

class App extends Component {
  render() {
    return (
      <React.Fragment>
        <Router>
          <Switch>
            <Route exact path = "/" ponent={Home} />
            <Route path="/developers" ponent = {Developers} />
            <Route path="/pricing" ponent = {Pricing} />
            <Route path="/login" ponent = {Login} />
            <Route ponent={NoMatch} /> 
          </Switch>
        </Router>
      </React.Fragment>
    );
  }
}


export default App;

My index.js file

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(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this es with some pitfalls.

serviceWorker.unregister();

Any help is greatly appreciated!

• javascript
• reactjs
• react-router

• is the react app also inside the docker container? – diedu Commented Apr 7, 2020 at 16:30
• Yes, its running in the docker container also. – MaxxABillion Commented Apr 7, 2020 at 16:39

3 Answers 3

You missed probably:

  import { BrowserRouter as Router, Route } from 'react-router-dom';

AND because using Docker drop your images and recreate them. This solves the problem.
If not do the following:

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

• 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();
  

• restart dev-server

• check if you did npm i react react-dom react-router-dom

Please give feedback (ment) what solved your problem and mark this answer then as accepted

Did you try reinstall npm because sometime npm version doeant meet libraries requirement

Since this is running in Docker.

I had to the mand make install dev

and this seems to fix everything