ошибка webpack неожиданный токен

Question

Попытка отладить эту ошибку в течение нескольких часов не могла найти, что с ней не так. Странная ошибка! app.js

var React = require('react'); 

var app = React.createClass({ 
    render() { 
     return (<h1>Hello World from Reach</h1>); 
    } 
}) 

module.export = app; 

АПП-client.js

var React = require('react'); 
var App = require('./components/app'); 

React.render(<App />, document.getElementById('react-container')); 

Ошибка

ERROR in ./app-client.js 
Module build failed: SyntaxError: /Users/alice/reactjs/app-client.js: Unexpected token (4:13) 
2 | var app = require('./components/app'); 
3 | 
4 | React.render(<app/>, document.getElementById('react-container')); 

Answer 1

У вас есть ошибка синтаксиса. В создании класса в app.js файле заменить render() на render: function() Таким образом, ваши app назначения должно выглядит как код ниже:

var app = React.createClass({ 
    render: function(){ 
     return (<h1>Hello World from Reach</h1>); 
    } 
}) 

Answer 2

Я думаю, что проблема в вашем webpack.config.js. Чтобы успешно создать jsx и ES6, вам нужно добавить больше загрузчиков. Вот мой предложенный js loader config, посмотрите, работает ли он для вас.

loaders: [ 
    { 
     test: /.jsx?$/, 
     loader: 'babel-loader', 
     exclude: /node_modules/, 
     query: {     
      presets: ['es2015', 'react', 'stage-0'] 
     } 
}, 

es2015 предварительно handles ES2015 features, you need to install via npm as described here. Вы, безусловно, нужен react preset to parse jsx. Stage 0 handles some of the latest javascript features.

Убедитесь, что вы установите их с помощью НПМ, как описано в ссылках и изменить веб pack.config.js.