오류 모듈 빌드에 실패했습니다 : 구문 에러 : 예기치 않은 토큰

Question

내가/REDUX/웹팩 반응하는 새로운 오전 및 설치에 처음부터 새로운 프로젝트를 시도하고 내가 모듈 빌드가 실패가 발생했습니다 구문 에러 : 내가 가지고있는 예기치 않은 토큰

유사한 질문에 대한 답변을 시도했지만 해결할 수 없었습니다.

스택 트레이스

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를 수정하고 해결. 당신은`rules`와`loaders` 모두를 사용하는 이유는

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'), 
    ], 
    }, 
};