How to resolve "module not found" in Reactjs?

Question

When I compile my app, it shows the error:

./src/Components/Landing.js
Module not found: Can't resolve 'react-router-dom' in 'C:\Users\gaura\Documents\REACT\love-writing\src\Components'

Following is the code of App.js and I have created a component named as Landing.js which is a fucntional component.

**

App.js

**

import React, {Component} from 'react';
//import logo from './logo.svg';
import './App.css';
import Landing from './Components/Landing';

class App extends Component {
  render() {
    return(
      <Landing/>
    );
  }
}
export default App;

**

Landing.js

**

import React from 'react';
import { Link } from 'react-router-dom';

const Landing = () => {
    const Accesstoken = window.localStorage.token;
    return(
        <div className = "App">
            <div className = "intro-message">
                <h1>Love Writing</h1>
                <br>
                </br>
                <h2>Makes your writing easier and better</h2>
                <hr className = "intro-divider" />
            </div>
            <div className="list-inline intro-social-buttons">
        <div className="list-inline-item">
          {!Accesstoken ? (
            <div>
              <Link to="/login">
                <button className="network-name">LOG IN</button>
              </Link>
              <Link to="/register">
                <button className="network-name">SIGN UP</button>
              </Link>
            </div>
          ) : (
            <div>
              <Link to="/addcategory">
                <button className="network-name">ADD GENRES</button>
              </Link>

              <Link to="/categories">
                <button className="network-name">VIEW GENRES</button>
              </Link>
            </div>
            )}

        </div>
      </div>
      <div className="copyright">
        <p>Copyright &copy; Love_Writing_Neha_Chaudhary 2019. All Rights Reserved</p>
      </div>

    </div>
  );
};

export default Landing;

**

Project Structure

** https://i.sstatic.net/lXvMp.jpg

I have properly imported Landing.js in App.js. I can't understand why I'm getting this error.

Did you installed react-router-dom package? npm i react-router-dom — SuleymanSah
– SuleymanSah, Commented Oct 28, 2019 at 17:29

0xAnon · Accepted Answer · 2019-10-28 21:23:03Z

2

Try by installing router-dom package by running the following in Shell/CMD

npm install react-router-dom --save

edited Oct 28, 2019 at 21:23

0xAnon

89710 silver badges25 bronze badges

answered Oct 28, 2019 at 17:31

NiceToMytyuk

4,49710 gold badges58 silver badges134 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Bhojendra Rauniyar · Accepted Answer · 2019-10-28 18:00:35Z

0

Update: Found the real culprit:

You have not used <Link /> inside the Router. You should wrap <Landing /> component in the router:

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

<Router>
  <Landing />
</Router>

The <Link /> component is not allowed to use outside the Router scope.

You may skip reading the following sections.

It seems you have not the package installed in your node_modules. So, run this command:

npm install react-router

It will install the react-router which holds the react-router-dom along with it.

If you are developing your app for browser only, then you may only install the react-router-dom:

npm install react-router-dom

I'm not fully sure what's going on there, so you may try this:

npm install react-router react-router-dom

Or, you might have compromised npm_modules? Run this command:

npm install

Wait! From your error, it seems you have not run project correctly. It should show you the file path from server. But it's showing you file path from the system? Run this command to start the project:

npm start

And if still doesn't help you. Here's my final thought:

rm -rf node_modules # remove all packages
npm cache clean # clear the cache
npm install # install all the packages
npm install --save react-router # if react-router-dom isn't in your package.json
npm start # run the project
# project should be run in localhost:3000 by default.

edited Oct 28, 2019 at 18:00

answered Oct 28, 2019 at 17:30

Bhojendra Rauniyar

86k36 gold badges179 silver badges241 bronze badges

8 Comments

SuleymanSah Over a year ago

the related package is react-router-dom

user11830230 Over a year ago

After doing what you just told, I'm getting this error.

user11830230 Over a year ago

./src/Components/Landing.js Module not found: Can't resolve 'react-router-dom' in 'C:\Users\gaura\Documents\REACT\love-writing\src\Components'

SuleymanSah Over a year ago

@NehaChaudhary just install react-router-dom package as I indicated in the comment with this command npm i react-router-dom

user11830230 Over a year ago

I did npm i react-router-dom... Still getting error like

|

Collectives™ on Stack Overflow

How to resolve "module not found" in Reactjs?

2 Answers 2

Comments

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related