Webpack，React，JSX，Babel-意外令牌< [英] Webpack, React, JSX, Babel - Unexpected token <

问题描述

这是我使用ExpressJS所拥有的:

This is what I have, using 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

/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

/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时，我得到:

When I run webpack I get:

模块解析失败:/app/index.js意外令牌< 您可能需要适当的加载程序来处理此文件类型.

Module parse failed: /app/index.js Unexpected token < You may need an appropriate loader to handle this file type.

当我将<People />替换为React.createElement(People, {})时，效果很好.

When I replace <People /> with React.createElement(People, {}) it works just fine.

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

I have the babel-preset-react module. I have presets:['react'] with the babel-loader loader. I have the .babelrc file.

为什么webpack/babel无法解析<People /> JSX ..?

Why can webpack/babel not parse the <People /> JSX..?

推荐答案

事实证明这是我的include路径存在的问题.我有:

This turned out to be an issue with my include path. I had:

include: __dirname + '/app'

我现在正在使用path:

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

哪个有效！我在Windows上，不知道这有什么不同.想想我将从现在开始例行使用path.

Which works! I'm on Windows, don't know if that makes a difference. Think I'll start using path routinely from now on.

将Webpack错误归类为Can't find include folder/files会很好.

Would've been nice for the webpack error to be something like Can't find include folder/files.

这篇关于Webpack，React，JSX，Babel-意外令牌&lt;的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！