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;

Answer 1

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

Answer 2

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