Webpack、React、JSX、Babel - 意外的令牌 <答案

【问题标题】：Webpack, React, JSX, Babel - Unexpected token <Webpack、React、JSX、Babel - 意外的令牌 <
【发布时间】：2016-07-10 23:49:52
【问题描述】：

这就是我所拥有的，使用 ExpressJS：

|-- app
|   |-- index.js
|-- node_modules
|   |-- babel-core
|   |-- babel-loader
|   |-- babel-preset-react
|   |-- express
|   |-- react
|   |-- react-dom
|   |-- webpack
|-- public
|   |-- js
|   |   |-- app.js
|   |-- index.html
|-- .babelrc
|-- index.js
|-- package.json
|-- webpack.config.js

/webpack.config.js

module.exports = {
    entry: [
        './app/index.js'
    ],
    module: {
        loaders: [{
            test: /\.js$/,
            include: __dirname + '/app',
            loader: "babel-loader",
            query: {
                presets:['react']
            }
        }]
    },
    output: {
        filename: "app.js",
        path: __dirname + '/public/js'
    }
};

/app/index.js

var React = require("react");
var ReactDOM = require("react-dom");
var People = React.createClass({
    ...
});
ReactDOM.render(<People />, document.getElementById('app'));

/.babelrc

{
  "presets": [
    "react"
  ]
}

当我运行 webpack 时，我得到：

模块解析失败：/app/index.js Unexpected token

当我用 React.createElement(People, {}) 替换 <People /> 时，它工作得很好。

我有babel-preset-react 模块。我有presets:['react'] 和babel-loader 加载器。我有.babelrc 文件。

为什么 webpack/babel 不能解析 <People /> JSX..？

【问题讨论】：

你使用的是什么版本的 Babel/React？
尝试添加test: /\.(js|jsx)$/ 作为您的测试。也许它没有解析 JSX 扩展。
@Andy babel-core: 6.7.4, babel-loader: 6.2.4, babel-preset-react: 6.5.0, react: 0.14.7, react-dom: 0.14.7
@lux 刚刚尝试过，没有运气，同样的信息。我没有任何扩展名为.jsx 的文件，只有.js。
如果您将loader: "babel-loader" 更改为简单的loader: "babel" 会怎样？这就是我的 webpack 配置的读取方式。

标签： javascript reactjs webpack babeljs

【解决方案1】：

这原来是我的include 路径的问题。我有：

include: __dirname + '/app'

我现在正在使用path：

include: path.join(__dirname, '/app')

哪个有效！我在Windows上，不知道这是否会有所不同。想我会从现在开始定期使用path。

如果 webpack 错误类似于 Can't find include folder/files 就好了。

【讨论】：

我在 mac 上遇到了同样的问题