Module not found: Can't resolve '../axios' in 'F:\React\react-complete-guide\src\Component'

Question

I'm getting this compilation error in my React project where I try to send a GET request:

./src/Component/Form.js
Module not found: Can't resolve '../axios' in 'F:\React\react-complete-guide\src\Component'

CODE:

import React, {Component} from 'react';

import axios from '../axios';

class Form extends React.Component{

state={UserName:""};

onChangeHandle=(event)=>{
    this.setState({UserName:event.target.value});

}

handleSubmit= (event) =>{

event.preventDefault();
console.log('form submit');

axios.get('https://api.github.com/users/${this.state.UserName}')
   .then(
       resp=>{
       console.log(resp);
    })

};


render(){
    return(
        <form onSubmit={this.handleSubmit}>
            <input type="text" 
                placeholder="Github UserName"
                value={this.state.UserName}
                onChange={this.onChangeHandle}   />
            <br/>
            <button type="submit"> Add card </button>
        </form>    
    )}
}

export default Form;

It seems axios is not imported/installed properly. Is this axios, npm package or some file in your project? How are you importing it? Please share the code of `src/Component/Form.js` to see how you have imported it. — Sunil Chaudhary, Jul 14 '18 at 09:28
It seems that axios node module is imported incorrectly. Instead of `import axios from '../axios';` it should be like `import axios from 'axios';` — Sunil Chaudhary, Jul 14 '18 at 22:30
I have read this issue on github but there is no perfect anser or solution for this — dev, Jul 16 '18 at 07:07
Can you add the github issue link here? I installed the axios package (`npm install axios --save`) and was able to successfully import the package by `import axios from 'axios'` — Sunil Chaudhary, Jul 18 '18 at 15:35

score 43 · Answer 1 · answered Feb 20 '19 at 01:24

43

Try:

1. Installing axios module with npm: npm install axios --save

2. Replacing your import code: import axios from '../axios'; with the: import axios from 'axios';

answered Feb 20 '19 at 01:24

Aleksandar G

1,163
2
20
25

npm install axios --save,saved me,thanks for the answer,can you explain whats mean by --save flag? – Aashiq Jun 14 '20 at 14:21
1

You're welcome :) `--save` basically tells **npm** to add the package to the dependencies list. – Aleksandar G Jun 15 '20 at 10:56
`--save` is not needed for npm 5.0.0 and above https://stackoverflow.com/questions/19578796/what-is-the-save-option-for-npm-install – somethingRandom Jul 10 '23 at 12:09

score 7 · Answer 2 · answered Jun 27 '20 at 00:16

The code

import axios from '../axios';

Is for importing a file, and the '../ ' is the path to the upper folder. Hence "../axios" means it's looking for a file "axios.js" in the outer folder of the current file.

An axios file is created to create an instance of axios to have some default parameters set as baseURL, intercepters etc.

Here, you have to import the module axios,given that you already have installed axios with,

npm install axios --save

You can import it as,

import axios from 'axios';

Replace your import axios line with the above line

score 3 · Answer 3 · edited Nov 08 '19 at 21:11

3

In your second line, please look at the error

import axios from '../axios';

that should be

import axios from 'axios';

edited Nov 08 '19 at 21:11

Karam Qusai

713
12
16

answered Oct 12 '18 at 20:20

anxi

39
2

score 1 · Answer 4 · answered Jan 14 '20 at 02:27

For me the issue was that I hadn't installed the axios module in my project folder. Make sure you are in the project directory when installing the axios module using:npm install axios --save

After installation simply run it using

import axios from 'axios';

score 1 · Answer 5 · answered Feb 04 '20 at 13:04

1

Its working fine for me.

Installing axios module with npm: npm install axios --save

answered Feb 04 '20 at 13:04

Thirsty Six

399
1
6
13

score 1 · Answer 6 · edited Jan 28 '22 at 12:39

1

I once had that error but I fixed it with npm install axios --save.

edited Jan 28 '22 at 12:39

ouflak

2,458
10
44
49

answered Jan 28 '22 at 11:08

GoldmindInc.

11
3

score 0 · Answer 7 · edited Feb 17 '21 at 10:12

0

The error message means that the axios package is missng and needs to be installed. Run below command in your project root directory, to install it.

npm install axios --save

edited Feb 17 '21 at 10:12

Sujit.Warrier

2,815
2
28
47

answered Feb 17 '21 at 09:23

Sherehime

11
2

Please don't add "thank you" as an answer. Instead, vote up the answers that you find helpful. – costaparas Feb 17 '21 at 09:55

score 0 · Answer 8 · answered Dec 17 '21 at 10:23

just open project directory after npm start, you might be seeing error like this: error message

after that, just type: npm i axios

in cmd opened in project directory and hit enter. after this the axios will be installed in project. as: view of console After this, if you re start by npm start, you may get message that port 3000 is already in use, so use other port, type Y, hit enter, and you should be fine to go.

score 0 · Answer 9 · answered Jan 02 '23 at 21:58

0

In case anybody uses yarn, do

yarn add anxios

answered Jan 02 '23 at 21:58

Danniel Little

746
7
12

Hamed Vahedi · Answer 10 · 2023-01-13T08:58:58.447

0

To solve the error "Module not found: Error: Can't resolve 'axios'", make sure to install the axios package by opening your terminal in your project's root directory and running the command:

npm install axios --save

or

yarn add axios

then restart your development server.

edited Jan 13 '23 at 08:58

answered Jan 13 '23 at 08:58

Hamed Vahedi

9
3

Module not found: Can't resolve '../axios' in 'F:\React\react-complete-guide\src\Component'

10 Answers10

Linked