I am trying to create a React application by tutorial .
app / main.js

var React = require('react'); var ReactDOM = require('react-dom'); ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example') );

webpack.config.js

 module.exports = { entry: './app/main.jsx', output: { filename: 'app.js' }, module: { loaders: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, loader: 'babel-loader' } ], resolve: { extensions: ['', '.js', '.jsx'] } } };

An error occurs:

Module build failed: SyntaxError: E: \ app \ main.jsx: Unexpected token (6: 2)

What am I doing wrong?

  • package.json in post by editing - Vasily Barbashev
  • And where can I get it? - Pavel
  • Um, then discard the folder structure, and how you launch the application - Vasily Barbashev
  • I launch via the console with the webpack-dev-server command. The folders are: Root joxi.ru/EA4X0LaCMe6WAb App joxi.ru/n2YZpgYcygQ3A6 - Pavel
  • one
    I did not understand why you weback-dev-server when the webpack command is written in the dock. BUT, when I studied entering the react , I was looking for good manuals for a long time, I found only 1 - maxfarseer.gitbooks.io/redux-course-ru/content/chapter1.html , which really opened up the light to me. Do everything for him, because There the architecturally correct creation of the application goes, through npm and collectors. Everything is simple enough for a beginner. Oddly enough, the docks off changed from the moment of my studying, to the worse, the beginning always went from initializing npm - Vasily Barbashev

1 answer 1

Something tells me that your tutorial is hopelessly rotten. And the problem is that Babel from version 6.x requires specifying plug-in code transformers ( presets ) explicitly. However, when specifying a webpack loader, you do not specify these plugins. As a consequence, no jsx -> js actually occurs. From here and abuse on an unidentified token.

The solution is trivial: instead of string

 loader: 'babel-loader'

you need to specify:

 loader: 'babel-loader?presets[]=es2015&presets[]=react'

And it is also worthwhile to install the babel-preset-es2015 and babel-preset-react , if you still haven't installed them.