我刚从 Reactjs 开始，正在编写一个简单的组件来显示
li标签并遇到了这个错误：
意外的令牌'<'
我已将示例放在 http://jsbin.com/UWOquRA/1/edit?html,js,console,output下面的 jsbin 中
请让我知道我做错了什么。
问问题
165739 次
17 回答
64
我使用type = "text/babel"解决了它
<script src="js/reactjs/main.js" type = "text/babel"></script>
于 2015-11-02T15:46:25.567 回答
30
更新：在 React 0.12+ 中，不再需要 JSX 编译指示。
确保在文件顶部包含 JSX pragma：
/** @jsx React.DOM */
如果没有这一行，jsx二进制和浏览器内的转换器将使您的文件保持不变。
于 2014-01-03T22:18:20.573 回答
30
问题Unexpected token '<'是因为缺少 babel 预设。
解决方案：您必须按如下方式配置您的 webpack 配置
{
test : /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader : 'babel',
query : {
presets:[ 'react', 'es2015' ]
}
}
这里 .jsx 检查 .js 和 .jsx 格式。
您可以使用节点简单地安装 babel 依赖项，如下所示
npm install babel-preset-react
谢谢
于 2016-06-03T07:07:11.247 回答
22
就我而言，我未能在我的脚本标签中包含 type 属性。
<script type="text/jsx">
于 2015-08-22T17:06:11.963 回答
8
我有这个错误，两天都无法解决。所以错误的修复非常简单。在正文中，您连接您的script，添加type="text/jsx"，这将解决问题。
于 2017-11-29T13:36:11.750 回答
7
您需要将该 JSX 代码转换/编译为 javascript 或使用浏览器内转换器
查看http://facebook.github.io/react/docs/getting-started.html并记下<script>标签，您需要包含这些标签才能让 JSX 在浏览器中工作。
于 2014-01-03T14:03:42.850 回答
3
这是您的 jsbin 中的一个工作示例：
HTML：
<!DOCTYPE html>
<html>
<head>
<script src="//fb.me/react-with-addons-0.9.0.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div id="main-content"></div>
</body>
</html>
jsx：
<script type="text/jsx">
/** @jsx React.DOM */
var LikeOrNot = React.createClass({
render: function () {
return (
<p>Like</p>
);
}
});
React.renderComponent(<LikeOrNot />, document.getElementById('main-content'));
</script>
从单个文件运行此代码，它应该可以工作。
于 2014-05-01T19:13:11.130 回答
2
如果您像我一样容易犯愚蠢的错误，请检查您的 package.json 是否包含您的 babel 预设：
"babel": {
"presets": [
"env",
"react",
"stage-2"
]
},
于 2018-06-14T02:05:33.397 回答
2
检查 .babelrc 是否在您的应用程序根文件夹中，而不是在子文件夹中。如果是这种情况，请将文件移动到根目录。
于 2020-05-17T18:02:52.310 回答
1
使用以下代码。我添加了对 React 和 React DOM 的引用。使用 ES6/Babel 将您的 JS 代码转换为 vanilla JavaScript。请注意，Render 方法来自 ReactDOM，并确保该 render 方法具有在 DOM 中指定的目标。有时您可能会遇到 render() 方法找不到目标元素的问题。发生这种情况是因为反应代码在 DOM 呈现之前执行。为了解决这个问题，使用 jQuery ready() 调用 React 的 render() 方法。这样你就可以确定 DOM 会首先被渲染。您还可以在应用脚本上使用 defer 属性。
HTML 代码：
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div id='main-content'></div>
<script src="CDN link to/react-15.1.0.js"></script>
<script src="CDN link to/react-dom-15.1.0.js"></script>
</body>
</html>
JS代码：
var LikeOrNot = React.createClass({
render: function () {
return (
<li>Like</li>
);
}
});
ReactDOM.render(<LikeOrNot />,
document.getElementById('main-content'));
希望这可以解决您的问题。:-)
于 2017-09-04T06:02:38.053 回答
1
要正确解析标签，您需要使用此 babel 版本：https ://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js 和属性“type='text/babel'”在脚本中。此外，您的自定义脚本应该在“body”标签内。
于 2016-09-06T07:22:52.060 回答
1
如果我们考虑您的真实站点配置，那么您需要在头部运行 ReactJS
<!-- Babel ECMAScript 6 injunction -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
并将属性添加到您的 js 文件 - type="text/babel" 之类的
<script src="../js/r1HeadBabel.js" type="text/babel"></script>
那么下面的代码示例将起作用：
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
于 2017-02-24T07:46:53.290 回答
0
虽然，我的 .babelrc 配置文件中有所有合适的 babel 加载器。这个带有 parcel-bundler 的构建脚本在手动页面刷新时为我在浏览器控制台中产生了意外的令牌错误 < 和 mime 类型错误。
"scripts": {
"build": "parcel build ui/index.html --public-url ./",
"dev": "parcel watch ui/index.html"
}
更新构建脚本为我解决了这些问题。
"scripts": {
"build": "parcel build ui/index.html",
"ui": "parcel watch ui/index.html"
}
于 2019-01-23T22:22:55.290 回答
0
这是另一种方式，你可以做到这一点 html
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<div id="app"></div>
<script src="src/index.js"></script>
</body>
</html>
index.js 文件，路径为 src/index.js
import React from "react";
import { render } from "react-dom";
import "./styles.scss";
const App = () => (
<div>
<h1>Hello test</h1>
</div>
);
render(<App />, document.getElementById("app"));
使用这个 package.json 会让你快速启动并运行
{
"name": "test-app",
"version": "1.0.0",
"description": "",
"main": "index.html",
"scripts": {
"start": "parcel index.html --open",
"build": "parcel build index.html"
},
"dependencies": {
"react": "16.2.0",
"react-dom": "16.2.0",
"react-native": "0.57.5"
},
"devDependencies": {
"@types/react-native": "0.57.13",
"parcel-bundler": "^1.6.1"
},
"keywords": []
}
于 2018-12-06T19:35:21.983 回答
0
就我而言，除了babel预设之外，我还必须将其添加到我的.eslintrc：
{
"extends": "react-app",
...
}
于 2017-02-06T13:52:12.107 回答
0
我今天刚开始学习React，遇到了同样的问题。下面是我写的代码。
<script type="text/babel">
class Hello extends React.Component {
render(){
return (
<div>
<h1>Hello World</h1>
</div>
)
}
}
ReactDOM.render(
<Hello/>
document.getElementById('react-container')
)
</script>
正如你所看到的，我在使用<Hello/>. 错误本身就是在说我们需要看哪条线。
因此，一旦我在函数的第二个参数之前添加了一个逗号ReactDOM.render()，一切都开始正常工作。
于 2018-10-08T12:33:12.567 回答
0
你可以使用这样的代码：
import React from 'react';
import ReactDOM from 'react-dom';
var LikeOrNot = React.createClass({
displayName: 'Like',
render: function () {
return (
React.createElement("li", null, "Like")
);
}
});
ReactDOM.render(<LikeOrNot />, document.getElementById('main-content'));
不要忘记添加<div id='main-content'></div>到body你的html
但是在你的 package.json 文件中你应该使用这个依赖：
"dependencies": {
...
"babel-core": "^6.18.2",
"babel-preset-react": "^6.16.0",
...
}
"devDependencies": {
...
"babel": "^6.5.2",
"babel-loader": "^6.2.7",
"babel-preset-es2015": "^6.18.0",
"jsx-loader": "^0.13.2",
...
}
这对我有用，但我也使用了 webpack，带有这个选项（进入 webpack.config.js）：
module: {
loaders: [
{
test: /\.jsx?$/, // Match both .js and .jsx files
exclude: /node_modules/,
loader: "babel-loader",
query:
{
presets: ['es2015', 'react']
}
}
]
}
于 2017-01-15T10:53:55.730 回答