解析错误：第1行：非法导入声明

Question

我使用名为App.jsx的文件中的代码创建了一个React应用程序，其开头如下：

import React, { Component } from 'react';
import logo from './logo.svg';
import ReactDOM from 'react-dom';
import './App.css';

当我npm run时，我得到：

> 1 | Parse Error: Line 1: Illegal import declaration
    |       ^
  2 | for file /path/to/file/App.jsx

我在线查看，除非我使用Babel，否则似乎无法识别import语句。

但是，根据我的理解，使用新的Create React App https://facebook.github.io/react/blog/2016/07/22/create-apps-with-no-configuration.html，不需要Babel。

那么解决这个问题的最佳方法是什么？

Answer 1

在.eslintrc文件中，通过ecmaFeatures: { modules: true }

启用模块

有关其他信息，请参阅Illegal import declaration - Issue #2112。

Answer 2

您不需要将Babel添加到项目中，因为它已包含在create-react-app提供的开发环境中。但是，您不能直接运行文件。您必须按照您在问题中链接的博客文章中的建议使用它。

Answer 3

从链接：

  

创建React App同时使用Webpack和Babel。

由于当前浏览器不支持 import 语句，您必须使用Babel或类似的