Question

为什么我在浏览器中看到下面的error？我只想在Flights中显示App组件，但得到error。

为什么会出现该错误，我该如何解决？

这里是App.js：

import React, { Component } from 'react';
import './App.css';
import Title from './components/Title/Title';
import Aux from './hoc/Aux';
import Flights from './components/Flights/Flights';

class App extends Component {
  render() {
    return (
      <Aux>
          <Title/>
          <Flights/>
      </Aux>
    );
  }
}

export default App;

这里是Flights.js：

import React, { Component } from 'react';
import axios from 'axios';

class Flights extends Component {
    constructor(props) {
        super(props);
    }

    componentDidMount() {
        axios.get('https://api.spotify.com/v1/albums')
            .then(response => {
                console.log("API Call ====> " + response);
            }).catch(error => {
                console.log(error);
        })
    }

    render() {
        return(
            <div>
                <p>Here are the songs:</p>
            </div>
        );
    }
}

export default Flights;

这是我遇到的错误：

./src/components/Flights/Flights.js
Module not found: Can't resolve 
'/Users/name/WebstormProjects/flights/node_modules/react-scripts/node_modules/babel-loader/lib/index.js' in 
'/Users/name/WebstormProjects/flights'

Answer 1

似乎您没有在项目中安装babel-loader。

您必须将babel-loader安装到devDependencies中：

$ npm install --save-dev babel-loader

如果您使用的是纱线

$ yarn add babel-loader

或者只需运行npm install或yarn install来安装/更新您添加到package.json中的所有软件包。

为什么我的.js文件出现错误？

1 个答案: