React app(使用create-react-app制作)不是解析组件

时间:2018-02-28 22:34:50

标签: reactjs webpack

我有一个React应用程序(使用create-react-app制作),其中包含以下组件:

import React from 'react'; 

const Sample = () => {
 return (<h1>Some sample text.</h1>);
}

export default Sample;

然而,当我运行npm run start时,我收到以下错误:

Users/blah/blah/blah/blah/node_modules/babel-
core/lib/transformation/file/index.js:590
5:27:45 PM api.1 |        throw err;
5:27:45 PM api.1 |        ^
5:27:45 PM api.1 |  SyntaxError: 
/Users/blah/blah/blah/blah/my_app/src/components/sux.jsx: Unexpected token (4:12)
5:27:45 PM api.1 |    2 | 
5:27:45 PM api.1 |    3 | const Sample = () => {
5:27:45 PM api.1 |  > 4 |     return (<h1>Some sample text</h1>);
5:27:45 PM api.1 |      |             ^
5:27:45 PM api.1 |    5 | }
5:27:45 PM api.1 |    6 | 
5:27:45 PM api.1 |    7 | export default Sample;
5:27:45 PM api.1 |      at Parser.pp$5.raise ( ... and so on

为什么这不能正确解析?我已经包含了退货,我已将其删除,我已更改了标记 - 这一切都会导致相同的错误。

有什么想法吗?谢谢!

更新:

这解析得很好:

import React, { Component } from 'react';

const Sample = () => {
 return ("wtf?");
}

export default Sample;

为什么要解析字符串但不解析html标记?

2 个答案:

答案 0 :(得分:2)

您是否在样本文件中导入了React? import React from 'react'; 使用jsx的每个组件都必须将React导入它。

答案 1 :(得分:0)

我通过明确添加babel-preset-react来解决问题。但是,对我来说似乎很奇怪,因为我的应用程序中的所有其他jsx组件都没有抛出此解析错误。

有什么想法吗?

感谢各位的帮助!