Блог

Я получаю сообщение об ошибке при попытке запустить мое приложение: модуль не найден: не удается разрешить ‘axios’ в ‘C:UsersOwnerportfoliosrcpages ‘

есть ли какой-нибудь способ, чтобы кто-нибудь здесь дал мне несколько советов о том, как это исправить?

Спасибо!

вот мой app.js код:

     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;
  

Большое вам спасибо, любая помощь очень ценится, я новичок в React и только учусь! Заранее всем спасибо..

Джош 🙂

Вероятно, вам нужно установить эту зависимость в свой проект, чтобы заставить его работать.

Запустить npm install axios или yarn add axios в зависимости от того, используете ли вы npm / yarn

Для меня использование yarn (вместо npm) позаботилось о зависимостях. Я собираюсь перечислить все мелкие детали в интересах людей, которые только начали свой путь реагирования:

1. Удалить package-lock.json (rm package-lock.json)
2. пряжа добавляет axios
3. Прочитайте сообщения, чтобы убедиться, что axios и его зависимости были добавлены
4. Перейдите в свой каталог node_modules (cd node_modules), затем перечислите, чтобы убедиться, что установлены axios и зависимости (ls)
5. Проверьте ваш App.js чтобы убедиться, что ваш импорт имеет правильный путь (действительно ли у вас должен быть ‘.. / axios’ или просто ‘axios’)
6. Остановите старый сервер разработки (Ctrl C)
7. Перезапустите сервер разработки (запуск пряжи)
8. Перейдите на вкладку браузера, на которой запущен localhost: 3000
9. (При необходимости) обновите страницу (для Chrome это верхняя левая стрелка по часовой стрелке слева от того места, где вы вводите URL)