我有一个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标记?
答案 0 :(得分:2)
您是否在样本文件中导入了React? import React from 'react';
使用jsx的每个组件都必须将React导入它。
答案 1 :(得分:0)
我通过明确添加babel-preset-react来解决问题。但是,对我来说似乎很奇怪,因为我的应用程序中的所有其他jsx组件都没有抛出此解析错误。
有什么想法吗?
感谢各位的帮助!