Reactjs:意外的令牌'<'错误

Posted

技术标签:

【中文标题】Reactjs:意外的令牌\'<\'错误【英文标题】:Reactjs: Unexpected token '<' ErrorReactjs:意外的令牌'<'错误 【发布时间】:2014-01-21 05:11:06 【问题描述】:

我刚开始使用 Reactjs,正在编写一个简单的组件来显示 li 标记并遇到此错误:

意外的令牌'

我已将示例放在下面的 jsbin 中 http://jsbin.com/UWOquRA/1/edit?html,js,console,output

请让我知道我做错了什么。

【问题讨论】:

【参考方案1】:

我使用 type = "text/babel"

解决了这个问题
<script src="js/reactjs/main.js" type = "text/babel"></script>

【讨论】:

没错,使用“text/babel”而不是“text/jsx”。引用 babel 核心 url -> cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js【参考方案2】:

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


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

/** @jsx React.DOM */

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

【讨论】:

但是 使用 babel 我不得不输入type="text/babel"javascript的美丽新世界 这在我的情况下有所帮助:***.com/questions/33460420/…【参考方案3】:

问题 Unexpected token ' 是因为缺少 babel 预设。

解决方案:您必须按如下方式配置 webpack 配置


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

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

你可以简单地使用 node 安装 babel 依赖,如下所示

npm install babel-preset-react

谢谢

【讨论】:

问题中没有任何内容表明原始发布者正在使用babel。 他说他刚开始使用 Reactjs ,因为必须使用 React babel 预设。可能是 webpack 配置错过了 babel 预设 问题中没有任何内容表明原始发布者也在使用 webpack。尽管它们都很方便,但它们都不是使用 React 所必需的。 @女娲谢谢。 npm install babel-preset-react 解决了我的问题。 如果项目中有.babelrc 文件,只需"presets": ["env", "react", "es2015"] 就可以了!!【参考方案4】:

在我的例子中,我没有在我的脚本标签中包含 type 属性。

<script type="text/jsx">

【讨论】:

【参考方案5】:

我有这个错误,两天都解决不了。所以修复错误很简单。 在正文中,您连接您的script,添加type="text/jsx",这将解决问题。

【讨论】:

你的答案也能解释一下吗? 我认为当你输入 type="text/jsx" 时,你会佩戴编译器来知道这是什么类型的文档或文件。【参考方案6】:

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

查看http://facebook.github.io/react/docs/getting-started.html 并注意&lt;script&gt; 标签,您需要包含这些标签才能让JSX 在浏览器中工作。

【讨论】:

是的,我知道,下面是更新的 jsbin link 那个jsbin好像有自己的js执行方式,错误出在他们的代码里面。 但它是相同的错误和相同的行号。此外,如果我使用与link中提供的相同代码,是否还有其他原因会发生这样的错误@ jsfiddle.net/9st5Q 这是您在 jsfiddle 中的代码,其中 React 工作正常。 确保在&lt;script type="text/jsx"&gt; 标签中设置了 type="text/jsx",如果需要,请将整个代码粘贴到 hastebin.org 中【参考方案7】:

这是您的 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>

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

【讨论】:

【参考方案8】:

如果你和我一样容易犯愚蠢的错误,还要检查你的 package.json 是否包含你的 babel 预设:

  "babel": 
    "presets": [
      "env",
      "react",
      "stage-2"
    ]
  ,

【讨论】:

【参考方案9】:

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

【讨论】:

【参考方案10】:

为了正确解析标签,您需要在脚本中使用这个 babel 版本:https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js 和属性“type='text/babel'”。此外,您的自定义脚本应该在“body”标签内。

【讨论】:

【参考方案11】:

如果我们考虑你的真实站点配置,那么你需要在 head 中运行 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')
); 

【讨论】:

【参考方案12】:

使用以下代码。我添加了对 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'));

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

【讨论】:

【参考方案13】:

你可以使用这样的代码:

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'));

别忘了将&lt;div id='main-content'&gt;&lt;/div&gt; 添加到html 中的body

但是在你的 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']
        
      
    ]
  

【讨论】:

【参考方案14】:

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


  "extends": "react-app",
  ...

【讨论】:

【参考方案15】:

我今天刚开始学习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>

如您所见,我在使用&lt;Hello/&gt; 后遗漏了一个逗号 (,)。错误本身就是在说我们需要看哪条线。

所以一旦我在 ReactDOM.render() 函数的第二个参数之前添加一个逗号,一切都开始正常工作了。

【讨论】:

【参考方案16】:

这是另一种方法 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": []

【讨论】:

【参考方案17】:

虽然,我的 .babelrc 配置文件中有所有合适的 babel 加载器。这个 使用 parcel-bundler 构建脚本 在手动页面刷新时为我在浏览器控制台中产生了意外的令牌错误

"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"
 

【讨论】:

以上是关于Reactjs:意外的令牌'<'错误的主要内容,如果未能解决你的问题,请参考以下文章

reactjs意外的令牌'<'

意外的令牌 <Container> ,reactjs,打字稿

条件下的ReactJs组件意外令牌错误[重复]

模块解析失败:意外的令牌 Reactjs?

在带有 Babel 的 ReactJS 上使用异步等待会导致错误:意外的令牌

未捕获的 SyntaxError:意外的令牌导入 - Reactjs