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
– Sunil Chaudhary, Commented Jul 14, 2018 at 9: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
– Sunil Chaudhary, Commented Jul 14, 2018 at 22:30
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
– Sunil Chaudhary, Commented Jul 18, 2018 at 15:35

Aleksandar G · Accepted Answer · 2019-02-20 01:24:36Z

45

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, 2019 at 1:24

Aleksandar G

1,1812 gold badges21 silver badges27 bronze badges

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

3 Comments

Aashiq Over a year ago

npm install axios --save,saved me,thanks for the answer,can you explain whats mean by --save flag?

Aleksandar G Over a year ago

You're welcome :) --save basically tells npm to add the package to the dependencies list.

somethingRandom Over a year ago

--save is not needed for npm 5.0.0 and above stackoverflow.com/questions/19578796/…

Shashank Prasad · Accepted Answer · 2020-06-27 00:16:41Z

7

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

answered Jun 27, 2020 at 0:16

Shashank Prasad

5041 gold badge10 silver badges12 bronze badges

Comments

Karam Qusai · Accepted Answer · 2019-11-08 21:11:37Z

3

In your second line, please look at the error

import axios from '../axios';

that should be

import axios from 'axios';

edited Nov 8, 2019 at 21:11

Karam Qusai

79913 silver badges17 bronze badges

answered Oct 12, 2018 at 20:20

anxi

392 bronze badges

Comments

Anirudh Sharma · Accepted Answer · 2020-01-14 02:27:05Z

1

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';

answered Jan 14, 2020 at 2:27

Anirudh Sharma

135 bronze badges

Comments

Thirsty Six · Accepted Answer · 2020-02-04 13:04:48Z

1

Its working fine for me.

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

answered Feb 4, 2020 at 13:04

Thirsty Six

5091 gold badge8 silver badges16 bronze badges

Comments

ouflak · Accepted Answer · 2022-01-28 12:39:50Z

1

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

edited Jan 28, 2022 at 12:39

ouflak

2,56310 gold badges46 silver badges53 bronze badges

answered Jan 28, 2022 at 11:08

GoldmindInc.

113 bronze badges

Comments

Sujit.Warrier · Accepted Answer · 2021-02-17 10:12:30Z

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, 2021 at 10:12

Sujit.Warrier

2,8992 gold badges31 silver badges48 bronze badges

answered Feb 17, 2021 at 9:23

Sherehime

112 bronze badges

1 Comment

costaparas Over a year ago

Please don't add "thank you" as an answer. Instead, vote up the answers that you find helpful.

Shubham · Accepted Answer · 2021-12-17 10:23:36Z

0

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.

answered Dec 17, 2021 at 10:23

Shubham

515 bronze badges

Comments

Danniel Little · Accepted Answer · 2023-01-02 21:58:48Z

0

In case anybody uses yarn, do

yarn add anxios

answered Jan 2, 2023 at 21:58

Danniel Little

8419 silver badges14 bronze badges

Comments

Hamed Vahedi · Accepted Answer · 2023-01-13 08:58:58Z

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, 2023 at 8:58

answered Jan 13, 2023 at 8:58

Hamed Vahedi

494 bronze badges

Collectives™ on Stack Overflow

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

10 Answers 10

3 Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

3 Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related