React、Babel、jsxを解析していないWebpack、予期しないトークンエラー

Question

wepbackを使用してアプリケーションを構築しようとしており、このunexpected tokenエラーで立ち往生しています。私のプロジェクトの依存関係はすべて問題なく、別の場所で同じプロジェクトを使用していますが、うまくいきますが、現在のコードをビルドしようとするとエラーが発生します。以下はconfig.jsとエラーの説明です

は、ここに私のapp.jsxここ

import React    from 'react'; 
import ReactDOM    from 'react-dom'; 
import {Router}    from 'react-router'; 
import Routes    from '../routes/routes'; 
import injectTapEventPlugin from 'react-tap-event-plugin'; 
import { browserHistory } from 'react-router'; 

require('../Config'); 

injectTapEventPlugin(); 

window.EventEmitter = { 
    _events: {}, 
    dispatch: function (event, data, returnFirstResult) { 
     if (!this._events[event]) return; 
     for (var i = 0; i < this._events[event].length; i++) 
     { 
      if(this._events[event][i]) 
      { 
       var r = this._events[event][i](data); 

       if(returnFirstResult) 
        return r; 
      } 
     } 
    }, 
    subscribe: function (event, callback, onlyOne) { 
     if (!this._events[event] || onlyOne) this._events[event] = []; // new event 
     this._events[event].push(callback); 
    } 
}; 

// Render the main app react component into the app div. 
// For more details see: https://facebook.github.io/react/docs/top-level-api.html#react.render 
ReactDOM.render(<Router history={browserHistory}>{Routes}</Router>, document.getElementById('app')); 

である私のconfig.jsの

var webpack = require('webpack'); 
var path = require('path'); 
var buildPath = path.resolve(__dirname, '../project/public/js/'); 
var nodeModulesPath = path.resolve(__dirname, 'node_modules'); 
var TransferWebpackPlugin = require('transfer-webpack-plugin'); 

var config = { 
    entry: { 
     app: path.join(__dirname, '/app/entry_points/app.jsx'), 
     vendor: ['react', 'radium'], 
    }, 
    resolve: { 
     extensions: ["", ".js", ".jsx"] 
    }, 

    devtool: 'source-map', 
    output: { 
     path: buildPath, 
     publicPath: '/js/', 
     filename: 'mobile.[name].js' 
    }, 
    plugins: [ 
     new webpack.optimize.CommonsChunkPlugin("vendor", "mobile.vendor.js"), 
     new webpack.DefinePlugin({}), 
     new webpack.NoErrorsPlugin(), 
    ], 
    module: { 
     preLoaders: [ 
      { 
       test: /\.(js|jsx)$/, 
       loader: 'eslint-loader', 
       include: [path.resolve(__dirname, "src/app")], 
       exclude: [nodeModulesPath] 
      }, 
     ], 
     loaders: [ 
      { 
       test: /\.(js|jsx)$/, 
       loaders: [ 
        'babel-loader' 
       ], 
       exclude: [nodeModulesPath] 
      }, 
      { 
       test: /\.css$/, 
       loader: "style-loader!css-loader" 
      }, 
     ] 
    }, 
    eslint: { 
     configFile: '.eslintrc' 
    }, 
}; 

module.exports = config; 

私が構築しようとすると、これは私が取得エラーです：

ERROR in ./app/entry_points/app.jsx 
Module build failed: SyntaxError: /home/zeus/Glide/project/project-mobile/app/entry_points/app.jsx: Unexpected token (46:16) 
    44 | // Render the main app react component into the app div. 
    45 | // For more details see: https://facebook.github.io/react/docs/top-level-api.html#react.render 
> 46 | ReactDOM.render(<Router history={browserHistory}>{Routes}</Router>, document.getElementById('app')); 
    |    ^

私はあなたにもes2015を追加したいと思い、私はあなたがバベルでプリセットを指定する必要が信じるreactv0.14.8、react-domv0.14.8、babel-loader^6.2.1

Answer 1

を使用してbabel-preset-react

loaders: [ 
     { 
      test: /\.(js|jsx)$/, 
      loaders: [ 
       'babel-loader' 
      ], 
      exclude: [nodeModulesPath], 
      query: { 
       presets: ['react'] 
      } 
     }, 
     ... 
    ] 

NPMモジュールをインストールしていますあなたがそれを使用しているなら、そのプリセット配列に。