モジュールビルドに失敗しました：syntaxerror：予期せぬトークン（React config）

Question

Reactがウェブパックでうまくプレイされ、このプロジェクトでレンダリングされる問題があります。私は構文の予期しないトークンエラーを取得しています。ここ

console error

ここで私のmain.js

import React, { Component } from 'react'; 
import ReactDOM from 'react-dom'; 

class MyComponentClass extends React.Component { 
render() { 
    return 'Test Component'; 
} 
} 

ReactDOM.render(<MyComponentClass />, document.getElementById('root')); 

である私のWebpack.configファイルです：

const ExtractTextPlugin = require('extract-text-webpack-plugin'); 
const path = require('path'); 
const webpack = require('webpack'); 

const config = { 
    entry: { 
    app: './client/scripts/main.js', 
    }, 

    output: { 
    filename: 'app.js', 
    path: path.join(__dirname, 'public') 
    }, 

    devtool: 'source-map', 
    module: { 
    rules: [ 
     { 
     test: /\.js$/, 
     include: __dirname + '/client/scripts', 
     loader: 'babel-loader', 
     }, 

    { 
    test: /\.css$/, 
    loader: ['css-hot-loader'].concat(ExtractTextPlugin.extract({ 
     fallback: 'style-loader', 
     use: [ 
     { 
      loader: 'css-loader', 
      options: { 
      sourceMap: true, 
      modules: true, 
      importLoaders: 1, 
      localIdentName: '[name]__[local]' 
      } 
     }, 
     { 
      loader: 'postcss-loader', 
     }, 
     ], 
    })), 
    }, 
    { 
    test: /\.html/, 
    loader: 'html-loader', 
    }, 
    { 
    test: /\.(jpe?g|png|gif)$/i, 
    loader: 'file-loader', 
    options: { 
     hash: 'sha512', 
     digest: 'hex', 
     name: 'images/[name].[ext]', 
    }, 
    }, 
], 
}, 
plugins: [ 
    new ExtractTextPlugin({ 
    filename: 'app.css', 
    ignoreOrder: true, 
    }), 
    new webpack.HotModuleReplacementPlugin() 
    ], 
    resolve: { 
    extensions: ['.css', '.js'], 
    modules: [ 
     path.join(__dirname, 'src'), 
     'node_modules', 
    ], 
    }, 
    devServer: { 
    contentBase: path.join(__dirname, "public"), 
    hot: true, 
    port: 8005, 
    } 
}; 

module.exports = config; 

そして、私のpackage.json

{ 
    "name": "jumpcloud-ui-assignment", 
    "version": "1.0.0", 
    "description": "A project that can be used to asses front end developers", 
    "repository": { 
    "type": "git", 
    "url": "git://github.com/TheJumpCloud/jumpcloud-ui-assignment.git" 
    }, 
    "private": true, 
    "author": "JumpCloud", 
    "bugs": { 
    "url": "https://github.com/TheJumpCloud/jumpcloud-ui-assignment/issues" 
    }, 
    "scripts": { 
    "start:client": "webpack-dev-server --progress --inline", 
    "start:server": "node server/server.js" 
    }, 
    "dependencies": { 
    "babel-preset-es2015": "^6.24.1", 
    "babel-preset-react": "^6.24.1", 
    "babel-preset-stage-0": "^6.24.1", 
    "body-parser": "^1.15.2", 
    "express": "^4.14.0", 
    "react": "^16.2.0", 
    "react-dom": "^16.2.0", 
    "underscore": "^1.8.3" 
    }, 
    "devDependencies": { 
    "autoprefixer": "^7.1.6", 
    "babel-core": "^6.26.0", 
    "babel-loader": "^7.1.2", 
    "css-hot-loader": "^1.3.3", 
    "css-loader": "^0.28.7", 
    "extract-text-webpack-plugin": "^3.0.2", 
    "postcss-loader": "^2.0.8", 
    "script-loader": "^0.7.2", 
    "style-loader": "^0.19.0", 
    "webpack": "^3.8.1", 
    "webpack-dev-server": "^2.9.4" 
    }, 
    "browserslist": [ 
    "> 1%", 
    "last 2 versions" 
    ] 
} 

イムそれは確かです他の同様の問題をここで打ち負かすと、ウェブパックの設定に関する問題が発生します。

Answer 1

{ 
    "presets": [ "es2015", "react" ] 
} 

を含むプロジェクトに '.babelrc' ファイルを追加します。そして、 `babel`チームは、`詳細を代わりにes2015` `プリセットenv`を使用することをお勧めします