Webpack, Reaktion, JSX, Babel - unerwartetes Token <

Question

Das ist, was ich habe, mit Express.js:

|-- 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" 
    ] 
} 

Wenn ich webpack laufen erhalte ich:

Modul fehlgeschlagen analysieren: /app/index.js unerwartetes Token < Sie einen geeigneten Lader müssen diesen Dateityp zu handhaben.

Wenn ich <People /> durch React.createElement(People, {}) ersetze, funktioniert es gut.

Ich habe das babel-preset-react Modul. Ich habe presets:['react'] mit dem babel-loader Lader. Ich habe die Datei .babelrc.

Warum kann webpack/babel die <People /> JSX .. nicht analysieren?

Answer 1

Dies erwies sich als ein Problem mit meinem include Pfad. Ich hatte:

include: __dirname + '/app' 

ich jetzt path bin mit:

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

Welche funktioniert! Ich bin auf Windows, weiß nicht, ob das einen Unterschied macht. Ich denke, ich werde von nun an routinemäßig path verwenden.

Wäre schön gewesen, dass der Webpack-Fehler so etwas wie Can't find include folder/files ist.