How To Fix “Module Not found: Can’t Resolve ‘Axios'” In React?

“Module not found: Can’t resolve ‘axios'” in React is a webpack resolve error. Please read the following instructions to resolve it.

Why does error “Module not found: Can’t resolve ‘axios'” in React occur?

The most common reason for the error “Module not found: Can’t resolve ‘axios'” in React is that you don’t have axios library installed. Therefore, webpack can’t find the package in your project, and it will display an error message. The example below will let you know when this error appears.

Code:

import axios from 'axios';

axios.get('/user', {
    params: {
      ID: 1707,
    }
})
.then(function (res) {
    setResponse(res)
})
.catch(function (error) {
    console.log(error);
});

Output

Module not found: Can't resolve 'axios' in '\desktop\my-app\src\App'

The error appeared when we ran the above code, so how to fix it? Let’s see the next part of the article.

How to fix this error?

Install axios package

Axios is a Promise-based HTTP Client library for Node.js and browsers. It is isomorphic (i.e., the same codebase can run in both the browser and Node.js).

You can install the axios package into your project using npm and yarn commands.

Install by npm command:

npm install axios

By yarn command:

yarn add axios

After running the above command, wait until webpack has finished loading the library, then rerun the project with the command “npm start” and see the results.

Check the dependencies in the package.json file

This way, you will check if the ‘dependencies’ in the ‘package.json’ file of the program contain the axios package. Then your package.json file should look like the below:

Code:

"dependencies": {
     "axios": "^1.1.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.4.2",
}

If your “dependencies” don’t look like that because your IDE is where you have the library installed, you can manually add it. I hope you find these strategies helpful.

Here is an example of when we have successfully installed the axios package for the project.

Code:

import axios from 'axios';
 
import {useState, useEffect} from 'react';
 
function App() {
  const [user, setUser] = useState("");
 
  useEffect(() => {
    axios.get('/user?ID=1707').then(response => {
      setUser(response.data);
    });
  }, []);
  return (
    <div>
      <h2>Module not found: Can't resolve 'axios'| LearnShareIT</h2>
      <p>name:{user.title} | age:{user.age} | email:{user.email}</p>
    </div>
  );
}
 
export default App;

Output:

Summary

To summarize, there are a few ways to fix the error “Module not found: Can’t resolve ‘axios'” in React. After reading this article, we know how to solve it by installing the axios package or checking the dependencies in the package.json file. Let’s try two methods!

Maybe you are interested:

• Module not found: Can’t resolve ‘sass-loader’ in React
• Module not found: Can’t resolve ‘rxjs’ in React
• Module not found: Can’t resolve ‘react-dom’

Nathaniel Kirk

Hi, my name’s Nathaniel Kirk. I’m interested in learning and sharing knowledge about programming languages. My strengths are C, C++, Python, HTML, CSS, Javascript, and Reactjs. If you have difficulty with them, don’t worry. I’m here to support you.

---

Name of the university: PTIT
Major: IT
Programming Languages: C, C++, Python, HTML, CSS, Javascript, Reactjs