REACTJS Module not found: Can't resolve 'axios'

Question

I am getting an error when i try run my application: Module not found: Can't resolve 'axios' in 'C:\\Users\\Owner\\portfolio\\src\\pages'

is there any way y anyone here give me some guidance on how to fix this?

Thanks!

here is my app.js code:

    import React from 'react';
import {BrowserRouter as Router, Route, Link } from 'react-router-dom';
import Container from 'react-bootstrap/Container';
import Navbar from 'react-bootstrap/Navbar';
import Nav from 'react-bootstrap/Nav';
import './App.css';

import Footer from './components/Footer';
import HomePage from './pages/HomePage';
import AboutPage from './pages/AboutPage';
import ContactPage from './pages/ContactPage';


class App extends React.Component {
  
  constructor(props) {
    super(props);
    this.state = {
      title: 'Josh M',
      headerLinks: [
        { title: 'Home', path: '/' },
        { title: 'About', path: '/about' },
        { title: 'Contact', path: '/contact' }
      ],
      home: {
        title: 'Be Fearless',
        subTitle: 'Projects the make a difference',
        text: 'Checkout my projects below'
      },
      about: {
        title: 'About Me'
      },
      contact: {
        title: 'Let\'s Talk'
      }
    }
  }

  render() {
    return (
      <Router>
        <Container className="p-0" fluid={true}>
          
          <Navbar className="border-bottom" bg="transparent" expand="lg">
            <Navbar.Brand>Josh McGuinness</Navbar.Brand>

            <Navbar.Toggle className="border-0" aria-controls="navbar-toggle" />
            <Navbar.Collapse id="navbar-toggle">
              <Nav className="ml-auto">
                <Link className="nav-link" to="/">Home</Link>
                <Link className="nav-link" to="/about">About</Link>
                <Link className="nav-link" to="/contact">Contact</Link>
              </Nav>
            </Navbar.Collapse>
          </Navbar>

          <Route path="/" exact render={() => <HomePage title={this.state.home.title} subTitle={this.state.home.subTitle} text={this.state.home.text} />} />
          <Route path="/about" render={() => <AboutPage title={this.state.about.title} />} />
          <Route path="/contact" render={() => <ContactPage title={this.state.contact.title} />} />
          
          <Footer />

        </Container>
      </Router>
    );
  }
}

export default App;

Thank you very much any help is greatly greatly appreciated, I'm very new to React and just learning! Thank you all in advance..

Josh :)

Answer 1

You probably need to install that dependency to your project in order to make it work.

Run npm install axios or yarn add axios depending if you are using npm/yarn

Answer 2

For me, using yarn (instead of npm) took care of the dependencies. I'm going to list every little bit of gory detail for the benefit of people who have just started on their react journey:

1. Remove package-lock.json (rm package-lock.json)
2. yarn add axios
3. Read messages to make sure axios and its dependencies were added
4. Change into your node_modules directory (cd node_modules) then list to make sure axios and dependencies were installed (ls)
5. Check your App.js to make sure your import has the correct path (whether you really should have a '../axios' or just 'axios')
6. Stop the old development server (Ctrl + C)
7. Restart the development server (yarn start)
8. Go to the browser tab that is running localhost:3000
9. (If necessary) refresh the page (For Chrome, it's the upper left clockwise arrow to the left of where you enter the URL)

Answer 3

1. install the axios dependency "npm install axios" (in command line of your project folder)
2. Import the package in "C:\\Users\\Owner\\portfolio\\src\\pages" like import axios from 'axios'