エラーモジュールのビルドに失敗しました：でSyntaxError：予期しないトークン

Question

私は/ Reduxの/ WebPACKのを反応させるのに新しいですし、セットアップを最初から新しいプロジェクトをしようとしていますし、私はモジュールのビルドが失敗した遭遇：でSyntaxError：私は予期しないトークン

同様の質問に対する回答を試みましたが、解決することはできませんでした。

スタックトレース

ERROR in ./Counter.js 
Module build failed: SyntaxError: Unexpected token (16:6) 

    14 | render() { 
    15 |  return (
> 16 |  <h1>Hello</h1> 
    |  ^
    17 | ); 
    18 | } 
    19 | } 

@ ./app.js 3:0-32 
@ multi ./app.js 

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

.bablelrc webpack.config.js

const path = require('path'); 

module.exports = { 
    context: path.join(__dirname, 'src'), 
    entry: [ 
    './app.js', 
    ], 
    output: { 
    path: path.join(__dirname, 'www'), 
    filename: 'bundle.js', 
    }, 
    module: { 
    rules: [ 
     { 
     test: /\.jsx?$/, 
     exclude: /node_modules/, 
     use: [ 
      'babel-loader', 
     ], 
     }, 
    ], 
    loaders: [ 
     { 
     test: /\.jsx?$/, 
     exclude: /node_modules/, 
     loader: 'babel', 
     query: { 
      presets: [ 'react', 'es2015' ] 
     } 
     } 
    ] 
    }, 
    resolve: { 
    modules: [ 
     path.join(__dirname, 'node_modules'), 
    ], 
    }, 
}; 

package.json

{ 
    "name": "starter", 
    "version": "1.0.0", 
    "description": "", 
    "main": "index.js", 
    "scripts": { 
    "compile": "webpack", 
    "start": "node server.js", 
    "test": "echo \"Error: no test specified\" && exit 1" 
    }, 
    "keywords": [], 
    "author": "", 
    "license": "ISC", 
    "dependencies": { 
    "babel-core": "^6.24.1", 
    "babel-loader": "^7.0.0", 
    "babel-preset-latest": "^6.24.1", 
    "babel-preset-react": "^6.24.1", 
    "express": "^4.15.3", 
    "immutable": "^3.8.1", 
    "react": "^15.5.4", 
    "react-dom": "^15.5.4", 
    "react-redux": "^5.0.5", 
    "redux": "^3.6.0", 
    "webpack": "^2.6.0", 
    "webpack-dev-middleware": "^1.10.2" 
    }, 
    "devDependencies": { 
    "babel-loader": "^7.0.0", 
    "babel-preset-es2015": "^6.24.1", 
    "babel-preset-react": "^6.24.1", 
    "webpack": "^2.6.0" 
    } 
} 

app.js

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import Counter from './Counter'; 

document.addEventListener('DOMContentLoaded', function() { 
    ReactDOM.render(
    React.createElement(Counter), 
    document.getElementById('mount') 
); 
}); 

counter.js

import React from 'react'; 
class Counter extends React.Component { 
    constructor() { 
    super(); 
    this.state = { 
     count: 0, 
    }; 
    } 

    render() { 
    return (
     <h1>Hello</h1> 
    ); 
    } 
} 
export default Counter; 

Answer 1

は、以下のコードで私のwebpack.config.jsを修正し、それを解決しました。

const path = require('path'); 

module.exports = { 
    context: path.join(__dirname, 'src'), 
    entry: [ 
    './app.js', 
    ], 
    output: { 
    path: path.join(__dirname, 'www'), 
    filename: 'bundle.js', 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.jsx?$/, 
     exclude: /node_modules/, 
     loader: 'babel-loader', 
     query: { 
      presets: [ 'react', 'es2015' ] 
     } 
     } 
    ] 
    }, 
    resolve: { 
    modules: [ 
     path.join(__dirname, 'node_modules'), 
    ], 
    }, 
};