React、babel、webpack 不解析 jsx 代码 [英] React, babel, webpack not parsing jsx code

问题描述

webpack.config.js

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

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/app.js

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

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

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

I have seen the exact same questions after searching around, but none of the answers seemed to apply to me. I am getting the following error when running webpack :

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

ERROR in ./app.js
Module build failed: SyntaxError: path/to/project/react-webpack-project/app/app.js: Unexpected token (5:2)

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

我不确定为什么我仍然收到此错误.我猜这与我的 webpack.config.js 文件有关，但不是 100% 的问题.

I am not sure why I am getting this error still. I am guessing it has something to do with my webpack.config.js file, but not 100% what the problem is.

推荐答案

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

First of all: if you are using React v^0.14, you should render your code using React-Dom. https://www.npmjs.com/package/react-dom

其次，这应该可以解决您的问题:babel-loader jsx 语法错误:意外令牌

Second, this should resolve your problem: babel-loader jsx SyntaxError: Unexpected token

这篇关于React、babel、webpack 不解析 jsx 代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！