堆栈内存溢出
  简体   繁体   English

ReactJS：意外令牌

[英]ReactJS: Unexpected Token <

 原文  2016-03-02 19:20:57  3   4    javascript/ jquery/ reactjs

问题描述

TL;DR: Why am I getting the error with my code? TL; DR：为什么我的代码出现错误？ Previous question is different (online vs desktop) and it's answers don't work for me. 上一个问题有所不同（在线与桌面），但答案对我不起作用。

Complete code here 完整的代码在这里

Based on code more or less originating here (I'm not quite to the end of the "lesson" 基于或多或少源自此处的代码（我还没到“课程”的结尾

Question: Following this "intro to ReactJS". 问题：遵循此 “ ReactJS简介”。 The walkthrough has Webpack/Babel setup. 本演练具有Webpack / Babel设置。 It runs with plain JS, but when I switch to JSX it chokes. 它与纯JS一起运行，但是当我切换到JSX时，它会窒息。 This is similar to this question , but none of those answers seem to work. 这类似于这个问题 ，但是这些答案似乎都不起作用。 Main difference: Web Playground vs locally on my box? 主要区别：Web Playground与本地安装在本地？

The end of the video I'm working on leads to this code - although, I'm only 3/4 of the way through so parts aren't included yet. 我正在处理的视频的结尾会显示此代码 -尽管我只经历了3/4的过程，所以尚不包括部分内容。 So, I've dialed it back into this fork with my edits (Sorry if I've butchered forking and pushing my changes...) 因此，我已经将其与编辑内容一起拨回到了这个分支中 （很抱歉，如果我屠夫了分叉并推动我的更改...）

Notes: The BEFORE and AFTER is the only things I've changed. 注意：更改之前和之后是唯一的更改。 It works with javascript/jquery - but not with JSX. 它适用于javascript / jquery-但不适用于JSX。 I found a couple typos, case errors (thisItem vs thisitem) and some items that shouldn't have been there (brackets removed). 我发现了一些错别字，大小写错误（thisItem与thisitem）和一些本不应该存在的项目（删除了括号）。

I've changed "my" typed out version to more closely match "their" version (Hello instead of HelloWorld) and made other minor changes... same error. 我更改了“我的”键入的版本，使其与“他们的”版本更匹配（Hello而不是HelloWorld），并进行了其他较小的更改……相同的错误。

The biggest remaining changes I see other than some spacing issues is versions - minor version bumps from the recorded class. 除了一些间距问题，我看到的最大的剩余更改是版本-记录的类中的次要版本碰撞。

My Code: 我的代码：

.babelrc .babelrc 

{ "presets": [ "react" ] }

package.json 的package.json 

 {
  "name": "github-battle",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server",
    "production": "webpack -p"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^0.14.7",
    "react-dom": "^0.14.7"
  },
  "devDependencies": {
    "babel-core": "^6.6.0",
    "babel-loader": "^6.2.4",
    "babel-preset-react": "^6.5.0",
    "html-webpack-plugin": "^2.9.0",
    "webpack": "^1.12.14",
    "webpack-dev-server": "^1.14.1"
  }
}

webpack.config.js webpack.config.js 

var HtmlWebpackPlugin = require('html-webpack-plugin')
var HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
    template: __dirname + '/app/index.html',
    filename: 'index.html',
    inject: 'body'
})

module.exports = {
    entry: [
        './app/index.js'
    ],
    output: {
        path: __dirname + '/dist',
        filename: "index_bundle.js"
    },
    module: {
        loaders:[
            { test: /\.js$/,include: __dirname + '/app',loader: "babel-loader" }
        ]
    },
    plugins: [HtmlWebpackPluginConfig]
}

app\\index.html 应用程序\\ index.html在 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Github Battle</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >
</head>
<body>
<div id="app"></div>
</body>
</html>

app\\index.js BEFORE app \\ index.js之前 

var app = document.getElementbyid('app')
app.innerHTML = 'Hello

app\\index.js AFTER app \\ index.js之后 

var React = require('react');
var ReactDOM = require('react-dom');

var HelloWorld = React.createClass({
    render: function () {
        return <div> Hello World </div>
    }
});

ReactDOM.render(
    <HelloWorld />,
    document.getElementById('app')
);

Result: 结果： 

> B:\Users\Chris\react-js\React-Fundamentals>npm run production
> gh-battle@1.0.0 production B:\Users\Chris\react-js\React-Fundamentals
> webpack -p

Hash: 21e367e251c35209471c
Version: webpack 1.12.14
Time: 375ms
          Asset       Size  Chunks             Chunk Names
index_bundle.js  289 bytes       0  [emitted]  main
     index.html  305 bytes          [emitted]
   [0] multi main 28 bytes {0} [built] [1 error]
   [1] ./app/index.js 0 bytes [built] [failed]

ERROR in ./app/index.js
Module parse failed: B:\Users\Chris\react-js\React-Fundamentals\app\index.js Line 6: Unexpected token <
You may need an appropriate loader to handle this file type.
| var Hello = React.createClass({
|   render: function () {
|     return <div> Hello ReactJS World! </div>
|   }
| });
 @ multi main
Child html-webpack-plugin for "index.html":
        + 3 hidden modules

B:\Users\Chris\react-js\React-Fundamentals>

webpack.config.js #2: Same rror webpack.config.js＃2：相同的错误 

var HtmlWebpackPlugin = require('html-webpack-plugin');
...
module.exports = {
  ...
  module: {
    loaders: [
      {test: /\.js$/, include: __dirname + '/app', loader: "babel-loader"}
    ],
    query: {
      presets: ['react']
    }
  },
  plugins: [HTMLWebpackPluginConfig]
};

4 个解决方案

解决方案1
 1  2016-03-02 20:18:10

您需要将index.js重命名为index.jsx 。

解决方案2
 1  2016-03-02 21:57:01

silly question: have you tried removing the square brackets in the "entry" declaration? 愚蠢的问题：您是否尝试过删除“ entry”声明中的方括号？ 

module.exports = {
    entry: './app/index.js',
    output: {
        path: __dirname + '/dist',
        filename: "index_bundle.js"
    },
    module: {
        loaders:[
            {
                test: /\.js$/,
                include: __dirname + '/app',
                loader: "babel-loader"
            }
        ]
    },
    plugins: [HtmlWebpackPluginConfig]
}

解决方案3
 1  2016-03-02 23:26:04

From your second webpack config file, query should be inside the babel loader object. 在第二个webpack配置文件中，查询应位于babel loader对象中。 

module: {
  loaders: [
    {
      test: /\.js$/, 
      include: __dirname + '/app', 
      loader: "babel-loader",
      query: {
        presets: ['react']
      } 
    }
  ]
}

Don't forget to install the babel-preset-es2015 plugin if you plan on using es6. 如果您打算使用es6，请不要忘记安装babel-preset-es2015插件。

解决方案4
 1  2016-03-03 14:54:44

Working Code here 这里的工作代码

After banging my head against the wall (which, honestly, helps beat the knowledge in - so it isn't all for naught)... I've made a couple minor changes and seem to be successful now: 在将我的头撞到墙上之后（说实话，这有助于将知识磨合-所以这并非一无是处）...我做了一些小改动，现在似乎很成功：

  1. changed .js to .jsx - I like the "explicit" acknowledgement that these aren't plain ole js. 将.js更改为.jsx-我喜欢“明确”的承认，这些不是普通的ole js。 (not required I think, more style) （我认为不需要，更多样式）
  2. I've removed the babelrc file and moved query into webpack.config... seems to be easier to compartmentalize things in a single file. 我已经删除了babelrc文件，并将查询移至webpack.config ...似乎更容易在单个文件中分隔内容。 this actually isn't working for me... se'la'vie 这实际上对我不起作用... se'la'vie
  3. The "solution" seems to be the __dirname + '/dir' changed into path.join(...) - with var path = require('path') actually included. “解决方案”似乎是__dirname + '/dir'更改为path.join(...) -实际包含var path = require('path') 。 I'll research (and ask a new question if I don't find one) how/why those two aren't equal, but I can only assume it has something to do with differing operating systems (Windows 10x64 for me). 我将研究（如果找不到，请问一个新问题）这两者为什么/为什么不相等，但我只能假定它与不同的操作系统有关（对我来说是Windows 10x64）。

EDIT:: Just some random poking, but include:__dirname + 'app', fails... as does '\\app' , '\\app\\' , '/app' , '/app/' ... no clue why, but path.join(...) works. 编辑：：只是一些随机戳，但include:__dirname + 'app',失败...以及'\\app' ， '\\app\\' ， '/app' ， '/app/' ...也不知道为什么，但path.join（...）可以工作。

Also worth noting, is that template: __dirname + '...', seems to work, but not the parts below it. 同样值得注意的是，该template: __dirname + '...',似乎可以工作，但下面的部分无效。 Filename vs directory, so again not sure of the difference. 文件名与目录，因此再次不确定其区别。

webpack.config.js webpack.config.js 

var path = require('path');

var HTMLWebpackPlugin = require('html-webpack-plugin');
var HTMLWebpackPluginConfig = new HTMLWebpackPlugin({
  template: __dirname + '/app/index.html',
  filename: 'index.html',
  inject: 'body'
});

module.exports = {
  entry: [
    './app/index.jsx'
  ],
  output: {
    path: path.join(__dirname, '/dist'),
    filename: "index_bundle.js"
  },
  module: {
    loaders: [{
        test: /\.jsx?$/, 
        include: path.join(__dirname, '/app'), 
        loader: "babel-loader"},
    ]
  },
  plugins: [HTMLWebpackPluginConfig]
};

index.jsx index.jsx 

var React = require('react');
var ReactDOM = require('react-dom');

var HelloWorld = React.createClass({
  render: function () {
    return <div> Hello ReactJS World! </div>
  }
});

ReactDOM.render(
    <HelloWorld />,
    document.getElementById('app')
);

index.html 的index.html 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Github Battle</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
  <div id="app"></div>
  <script src="index_bundle.js"></script></body>
</html>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 ReactJS 随机意外的令牌&#39;&lt;&#39; - ReactJS randomly Unexpected token '<' 组件中的ReactJS意外令牌 - ReactJS Unexpected Token in Component reactjs意外的标记&#39;&lt;&#39; - reactjs Unexpected token '<' ReactJS-意外令牌，预期} - ReactJS - Unexpected token, expected } reactJS中出现意外的令牌错误 - Unexpected token error in reactJS reactjs意外的令牌“ /” - reactjs Unexpected token “/” ReactJS：意外标记“&lt;” - ReactJS: unexpected token '<' 解析错误：意外令牌 = ReactJs - Parsing error: Unexpected token = ReactJs 返回语句中的 ReactJS 意外标记 - ReactJS unexpected token in return statement reactJS 意外令牌，应为“;” 在构造函数中 - reactJS Unexpected token, expected “;” in constructor
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM