Webpack, React, JSX, Бабель - Неожиданный токен <

Question

Это то, что у меня есть, используя 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 Неожиданный маркер < Вам может понадобиться соответствующий загрузчик для обработки этого типа файлов.

Когда я заменяю <People />React.createElement(People, {}), он работает нормально.

У меня есть модуль babel-preset-react. У меня есть presets:['react'] с загрузчиком babel-loader. У меня есть файл .babelrc.

Почему webpack/babel не разбирает <People /> JSX ..?

Answer 1

Это оказалось проблемой для моего пути include. У меня было:

include: __dirname + '/app' 

Я теперь с помощью path:

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

, который работает! Я нахожусь в Windows, не знаю, имеет ли это значение. Думаю, я начну использовать path с этого момента.

Было бы неплохо, если бы ошибка в webpack была чем-то вроде Can't find include folder/files.