找不到 REACTJS 模块：无法解析“axios”答案

【问题标题】：REACTJS Module not found: Can't resolve 'axios'找不到 REACTJS 模块：无法解析“axios”
【发布时间】：2021-01-23 01:04:07
【问题描述】：

当我尝试运行我的应用程序时出现错误：找不到模块：无法解析“C:\Users\Owner\portfolio\src\pages”中的“axios”

这里有人给我一些关于如何解决这个问题的指导吗？

谢谢！

这是我的 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 很陌生，刚刚学习！先谢谢大家了。。

乔什:)

【问题讨论】：

axios 不会出现在该代码中的任何位置。错误消息到底是什么以及它指的是哪个精确位置（文件和行号）？

标签： javascript node.js reactjs visual-studio-code

【解决方案1】：

对我来说，使用 yarn（而不是 npm）来处理依赖关系。我将列出所有血淋淋的细节，以帮助刚开始 React 之旅的人们：

移除 package-lock.json (rm package-lock.json)
纱线添加axios
阅读消息以确保已添加 axios 及其依赖项
进入你的 node_modules 目录 (cd node_modules) 然后列出以确保安装了 axios 和依赖项 (ls)
检查您的 App.js 以确保您的导入具有正确的路径（无论您真的应该有一个 '../axios' 还是只有一个 'axios'）
停止旧的开发服务器 (Ctrl + C)
重启开发服务器（yarn start）
转到运行 localhost:3000 的浏览器选项卡
（如有必要）刷新页面（对于 Chrome，它是输入 URL 左侧的左上角顺时针箭头）

【讨论】：

【解决方案2】：

您可能需要将该依赖项安装到您的项目中才能使其正常工作。

运行 npm install axios 或 yarn add axios 取决于你是否使用 npm/yarn

【讨论】：