Webpack - Babel - JSX-Syntaxanalyse: SyntaxError: Unerwarteter Token

Question

Ich versuche, eine React-Anwendung mit Webpack zu erstellen. Ich verwende Babel, um .jsx-Dateien zu übertragen. Aber es scheint, es verwendet nicht Babel Loader, um .jsx-Datei zu laden. Ich erhalte folgende Fehlermeldung:

ERROR in ./app.jsx 
Module parse failed: C:\codebase\react-demo/app\app.jsx Unexpected token (7:15) 
You may need an appropriate loader to handle this file type. 
SyntaxError: Unexpected token (7:15) 
    at Parser.pp$4.raise (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:2221:15) 
    at Parser.pp.unexpected (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:603:10) 
    at Parser.pp$3.parseExprAtom (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:1822:12) 
    at Parser.pp$3.parseExprSubscripts (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:1715:21) 
    at Parser.pp$3.parseMaybeUnary (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:1692:19) 
    at Parser.pp$3.parseExprOps (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:1637:21) 
    at Parser.pp$3.parseMaybeConditional (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:1620:21) 
    at Parser.pp$3.parseMaybeAssign (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:1597:21) 
    at Parser.pp$3.parseExpression (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:1573:21) 
    at Parser.pp$1.parseReturnStatement (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:839:33) 
    at Parser.pp$1.parseStatement (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:699:34) 
    at Parser.pp$1.parseBlock (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:981:25) 
    at Parser.pp$3.parseFunctionBody (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:2105:24) 
    at Parser.pp$3.parseMethod (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:2075:10) 
    at Parser.pp$1.parseClassMethod (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:1137:25) 
    at Parser.pp$1.parseClass (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:1118:14) 
    at Parser.pp$1.parseStatement (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:697:19) 
    at Parser.pp$1.parseTopLevel (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:638:25) 
    at Parser.parse (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:516:17) 
    at Object.parse (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:3098:39) 
    at Parser.parse (C:\codebase\react-demo\node_modules\webpack\lib\Parser.js:902:15) 
    at DependenciesBlock.<anonymous> (C:\codebase\react-demo\node_modules\webpack\lib\NormalModule.js:104:16) 
    at DependenciesBlock.onModuleBuild (C:\codebase\react-demo\node_modules\webpack-core\lib\NormalModuleMixin.js:310:10) 
    at nextLoader (C:\codebase\react-demo\node_modules\webpack-core\lib\NormalModuleMixin.js:275:25) 
    at C:\codebase\react-demo\node_modules\webpack-core\lib\NormalModuleMixin.js:259:5 
    at Storage.finished (C:\codebase\react-demo\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:38:16) 
    at C:\codebase\react-demo\node_modules\graceful-fs\graceful-fs.js:78:16 
    at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:439:3) 

Mein webpack.config.js wie folgt aussieht:

var webpack = require('webpack'); 
var path = require('path'); 
var HtmlWebpackPlugin = require('html-webpack-plugin'); 

var __dirname = path.resolve(); 

module.exports = { 
    context: __dirname + "/app", 
    entry: "./app.jsx", 
    output: { 
     path: __dirname + "/dist/", 
     filename: "bundle.min.js" 
    }, 
    loaders: [{ 
     test: /\.jsx?$/, 
     exclude: /node_modules/, 
     loader: 'babel-loader', 
    }], 
    plugins: [ 
     new webpack.optimize.DedupePlugin(), 
     new webpack.optimize.OccurenceOrderPlugin(), 
     new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }), 
     new HtmlWebpackPlugin({ 
      template: 'index.html' 
     }) 
    ], 
}; 

Mein app.jsx (in ./app/app/jsx gelegen) ist:

import React from 'react'; 
import ReactDOM from 'react-dom'; 

class App extends React.Component { 

    render() { 
     return <div > Test < /div>; 
    } 
} 

ReactDOM.render(<App/>, document.getElementById('app')); 

I haben folgende .babelrc:

{ 
    "presets": ["es2015", "stage-0", "react"] 
} 

Ich habe folgende Knoten Abhängigkeiten installiert:

"devDependencies": { 
    "babel-core": "^6.13.2", 
    "babel-loader": "^6.2.4", 
    "babel-preset-es2015": "^6.13.2", 
    "babel-preset-react": "^6.11.1", 
    "babel-preset-stage-0": "^6.5.0", 
    "html-webpack-plugin": "^2.22.0", 
    "react": "^15.3.0", 
    "react-dom": "^15.3.0", 
    "webpack": "^1.13.1", 
    "webpack-dev-server": "^1.14.1" 
} 

Jede Idee, was ich fehlen könnte?

Answer 1

Das Problem liegt in der Loader-Konfiguration.

Eigenschaft loaders sollte in Objekt module sein.

module.exports = { 
    … 
    module: { 
     loaders: [{ 
      test: /\.jsx?$/, 
      exclude: /node_modules/, 
      loader: 'babel-loader', 
     }], 
    }, 
    … 
}; 

Siehe https://webpack.github.io/docs/loaders.html