Module not found: error: cant resolve react-router-dom

I am dealing with this same issue on two new projects I have just started and I have it configured the way I have it on another in production and for some reason I can't seem to find the bug here.

Here are my dependencies in my package.json:

"dependencies": {
    "react": "^16.8.6",
    "react-bootstrap": "^0.32.4",
    "react-dom": "^16.8.6",
    "react-router-dom": "^4.3.1",
    "react-scripts": "3.0.1"

I have an index.js file where I am wrapping my <App /> component inside of the <Router /> component that I am importing with BrowserRouter as specified from react-router-dom.

Here are the contents of 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(
  <Router>
    <App />
  </Router>,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

From there my <App /> component implements a custom <Routes /> component that uses Route and Switch from react-router-dom to handle my app's routing needs.

Here are the contents of my <App /> component:

import React, { Component } from "react";
import { Link } from "react-router-dom";
import { Navbar } from "react-bootstrap";
import Routes from "./Routes.js";
import "./App.css";

class App extends Component {
  render() {
    return (
      <div className="App container">
        <Navbar fluid collapsOnSelect>
          ...... misc navbar code
        </Navbar>
        <Routes />
      </div>
      );
  }
}

export default App;

This is what my Routes.js file looks like and how it uses the Route and Switch from react-router-dom:

import React from "react";
import { Route, Switch } from "react-router-dom";
import Home from "./containers/Home";

export default () => <Switch>
                       <Route path="/" exact component={ Home } />
                     </Switch>;

Here is the { Home } component that I am trying to serve up locally:

import React, { Component } from "react";
import "./Home.css";

export default class Home extends Component {
  render() {
    return (
      <div className="Home">
        <div className="LandingPage">
          ... random html code
        </div>
      </div>
      );
  }
}

And finally here is the error:

What do you think could be the problem here??? Thanks !

Failed To Compile ./Src/App.Js Module Not Found: Can’T Resolve ‘React-Router-Dom With Code Examples

In this session, we’ll try our hand at solving the Failed To Compile ./Src/App.Js Module Not Found: Can’T Resolve ‘React-Router-Dom puzzle by using the computer language. The code that is displayed below illustrates this point.

npm install react-router-dom --save

Another solution that is described below with code examples can be used to solve the same issue Failed To Compile ./Src/App.Js Module Not Found: Can’T Resolve ‘React-Router-Dom.

[Solved] Failed to compile ./src/components/App/App.js Module not found: Can’t resolve ‘react-router-dom’

We have seen how to solve the Failed To Compile ./Src/App.Js Module Not Found: Can’T Resolve ‘React-Router-Dom with various examples.

How do you fix module not found Cannot resolve in react?

To solve the “Module not found: Can’t resolve” error in React, make sure to install the package from the error message if it’s a third-party package, e.g. npm i somePackage . If you got the error when importing local files, correct your import path.25-Jul-2022

How install Dom On react router?

To install React Router, all you have to do is run npm install [email protected] in your project terminal and then wait for the installation to complete. If you are using yarn then use this command: yarn add [email protected] .14-Dec-2021

What is a react router Dom?

React Router DOM is an npm package that enables you to implement dynamic routing in a web app. It allows you to display pages and allow users to navigate them. It is a fully-featured client and server-side routing library for React.16-Nov-2021

How do I find my Dom react Router version?

You can use the below step to identify the “react” and “react-dom”.

• Open DeveloperTool in your browser.
• Go to Source Tab.
• Check your appName .js file.
• Search for “react” or “react-dom” You will find something like below. That will be the version your react-app is using.

To solve the error “Module not found: Error: Can’t resolve ‘react-dom'”, make sure to install the react-dom package by opening your terminal in your project’s root directory and running the command npm install react-dom react and restart your development server.19-Mar-2022

Can not find module in react?

To solve the “Cannot find module react or its corresponding type declarations” error, install the module and its type definitions by running the commands npm install react and npm i –save-dev @types/react . Copied! Now you should be able to import the react library with the following line of code.19-Feb-2022

How do I update my dom react router?

Update react-router-dom in package.json 6, also we can “npm install [email protected]” – which will always give you the very latest version.12-Jan-2022

How do I add a router to react JS?

In this chapter, we will learn how to set up routing for an app.

• Step 1 – Install a React Router. A simple way to install the react-router is to run the following code snippet in the command prompt window.
• Step 2 – Create Components. In this step, we will create four components.
• Step 3 – Add a Router.

What is difference between react router and react router dom?

The primary difference between them lies in their usage. React Router DOM is for web applications and React Router Native is for mobile applications made with React Native.19-Apr-2021

How do I add react router to react app?

Go to the index. js file in your project and import the necessary functions from react , react-dom , and react-router-dom and mount a React app in a div with the ID of root : // index.

How do you fix module not found Cannot resolve in react?

How do I fix Dom error on react router?

Can't find module react Dom router?

How install Dom On react router?