Update to BabelJS 6

[edwardsamuel]

BabelJS just launched new major version 6. It makes breaking changes, especially how to compile React and ES6. I was getting this error:

ERROR in ./app/main.jsx
Module build failed: SyntaxError: /home/edward/learn/react-webpack-cookbook/app/main.jsx: Unexpected token (7:17)
  5 | 
  6 | function main() {
> 7 |     React.render(<Hello />, document.getElementById('app'));
    |                  ^
  8 | }
  9 | 

I wrote a post in here to solve that: https://edwardsamuel.wordpress.com/2015/11/01/react-syntax-error-unexpected-token/.

[wyoumans]

+1

[azizpunjani]

I have a PR open for this https://github.com/christianalfoni/react-webpack-cookbook/pull/59

[wfpaisa]

:+1:

[EasonWang01]

For short,just install

    "babel-core": "^6.5.2",
    "babel-loader": "^6.2.2",
     "babel-preset-es2015": "^6.5.0",
    "babel-preset-react": "^6.5.0"

and

webpack.config.js

var path = require('path');
var config = {
  entry: path.resolve(__dirname, 'app/main.js'),
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      test: /\.jsx?$/, // A regexp to test the require path. accepts either js or jsx
      loader: 'babel', // The module to load. "babel" is short for "babel-loader"
       query: {
                  presets: ['es2015','react']
                }

    }]
  }
};

module.exports = config;

[azizpunjani]

@EasonWang01 you will also need to install babel-preset-es2015 and babel-preset-react.

[EasonWang01]

ha,I forgot.

package.json

{
  "name": "class1webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build"
  },
  "author": "Eason",
  "license": "ISC",
  "dependencies": {
    "babel-core": "^6.5.2",
    "babel-loader": "^6.2.2",
    "babel-preset-es2015": "^6.5.0",
    "babel-preset-react": "^6.5.0",
    "react": "^0.14.7",
    "webpack": "^1.12.13",
    "webpack-dev-server": "^1.14.1"
  }
}

[bebraw]

Done. See Configuring React.