React.js：意外的令牌“ <”错误

Answers:

30

更新：在React 0.12+中，不再需要JSX编译指示。

确保在文件顶部包含JSX编译指示：

/** @jsx React.DOM */

如果没有这一行，jsx二进制和浏览器内的转换器将使您的文件保持不变。

— 索菲·阿尔珀特（Sophie Alpert）
source
10
但是<script type =“ text / jsx”>是
— xavier 2015年
4
我不得不用巴别塔扔掉type="text/babel"。勇闯javascript新世界
— Connor Leech 2015年
这有助于在我的情况：stackoverflow.com/questions/33460420/...
— timhc22
28

问题意外令牌'<'是因为缺少babel预设。

解决方案：您必须按以下方式配置Webpack配置

{
  test   : /\.jsx?$/,
  exclude: /(node_modules|bower_components)/,
  loader : 'babel',
  query  : {
    presets:[ 'react', 'es2015' ]
  }
}

.jsx在这里检查.js和.jsx格式。

您可以使用节点简单地安装babel依赖项，如下所示

npm install babel-preset-react

谢谢

— 女wa
source
问题中没有任何内容表明原始海报正在使用babel。
— ivarni
他说他只是从Reactjs开始，因为必须使用React babel预设。可能是webpack配置错过了babel预设
— Nuwa
问题中没有任何内容表明原始海报也正在使用webpack。尽管它们都很方便，但是与React都不是必需的。
— ivarni
4
@努瓦谢谢你。npm install babel-preset-react解决了我的问题。
— YasinYörük17年
4
如果您.babelrc仅在项目中有文件"presets": ["env", "react", "es2015"]，就是这样！！
— 拜伦·洛佩兹
21

就我而言，我未能在脚本标签中包含type属性。

<script type="text/jsx">
— 肖恩·M
source
7

您需要将该JSX代码转换/编译为javascript或使用浏览器内转换程序

查看http://facebook.github.io/react/docs/getting-started.html并记下这些<script>标记，您需要这些标记才能使JSX在浏览器中工作。

— rs
source
是的，我知道，下面是更新的jsbin 链接
— sam
那个jsbin似乎有他们自己的执行JS的方式，错误来自他们的代码内部。
— 2014年
但这是相同的错误，并且在相同的行号。另外，如果我使用链接中
— sam 2014年
jsfiddle.net/9st5Q这是您在jsfiddle中的代码，React可以正常工作。
— 2014年
7
请确保您在标记中设置了type =“ text / jsx”<script type="text/jsx">，如果需要，请将整个代码粘贴到hastebin.org粘贴中
— krs
7

我有此错误，两天都无法解决。因此，错误的修复非常简单。在正文中，在您连接的地方script添加type="text/jsx"，这将解决问题。

— Руслан
source
您还能为您的答案提供解释吗？
— MMascarin
1
我认为，当您提供type =“ text / jsx”时，您会使用编译器来知道这是什么类型的文档或文件。
— Руслан
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>

从单个文件运行此代码，它应该可以工作。

— myusuf
source
2

如果您像我一样容易出错，还请检查package.json是否包含您的babel预设：

  "babel": {
    "presets": [
      "env",
      "react",
      "stage-2"
    ]
  },
— 粉红华夫饼
source
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')
);
— 罗曼
source
1

使用以下代码。我添加了对React和React DOM的引用。使用ES6 / Babel将您的JS代码转换为原始JavaScript。请注意，Render方法来自ReactDOM，并确保render方法具有在DOM中指定的目标。有时您可能会遇到render（）方法找不到目标元素的问题。这是因为在DOM呈现之前执行了react代码。为了解决这个问题，使用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'));

希望这能解决您的问题。:-)

— 阿hay四郎
source
1

检查.babelrc是否在应用程序根文件夹中，而不在子文件夹中。如果是这种情况，请将文件移至根目录。

— 安德鲁·奥克斯昆
source
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']
        }
      }
    ]
  }
— 维塔利·安德鲁希辛（Vitaliy Andrusishyn）
source
0

就我而言，除了babel预设之外，我还必须将其添加到我的.eslintrc：

{
  "extends": "react-app",
  ...
}
— 铁氟龙
source
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()函数的第二个参数之前添加了逗号，所有功能就可以正常工作了。

— 西贝什·维努（Sibeesh Venu）
source
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>

路径为src / index.js的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": []
}
— 斯尼维奥
source
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"
 }
— 阿比耶耶
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.