React,babel,webpack不解析jsx代码

Question

webpack.config.js

module.exports = {
  context: __dirname + "/app",
  entry: {
    javascript: "./app.js",
    html: "./index.html",
  },
  resolve: {
   extensions: ['', '.js', '.jsx']
 },
  output: {
    filename: "app.js",
    path: __dirname + "/dist",
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: "babel-loader",
      },
      {
        test: /\.html$/,
        loader: "file?name=[name].[ext]",
      },
    ],
  },
}

的package.json

{
  "name": "react-webpack-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel": "^6.0.15",
    "babel-core": "^6.0.20",
    "babel-loader": "^6.0.1",
    "file-loader": "^0.8.4",
    "webpack": "^1.12.2"
  },
  "dependencies": {
    "react": "^0.14.2"
  }
}

应用程序/ app.js

import React from "react";
import Greeting from "./greeting";

React.render(
  <Greeting name="World"/>,
  document.body
);

我在搜索后看到了完全相同的问题,但没有一个答案似乎适用于我.运行时出现以下错误webpack:

./app.js中的错误
模块构建失败:SyntaxError:path/to/project/react-webpack-project/app/app.js:意外的令牌(5:2)

React.render(
  <Greeting name="World"/>,
  document.body
);

我不知道为什么我仍然会收到这个错误.我猜它与我的webpack.config.js文件有关,但不是100%问题所在.

Answer 1

您需要为babel-loader添加预设:

{
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: "babel-loader",
        presets: ['es2015', 'react']  
},

http://babeljs.io/docs/plugins/#presets

Answer 2

首先:如果您使用的是React v ^ 0.14,则应使用React-Dom渲染代码.https://www.npmjs.com/package/react-dom

其次,这应解决您的问题: babel-loader jsx SyntaxError:意外的令牌

Answer 3

我目前正在使用React 0.14.3.ReactDOM解决方案不起作用,也没有将babel预设添加到webpack.config.js中.基本上,这些解决方案似乎只有在你定义了一个加载器的情况下才能工作,但是我既有babel-loader也有反应式加载器.

DID的工作原理是安装babel react预设模块:

npm install babel-preset-react

然后使用以下命令在我的项目目录中创建一个.babelrc文件:

{
  "presets": ['react']
}

这一点记录在http://babeljs.io/docs/plugins/preset-react/,正如Abhinav Singi所指出的那样