P.Brian.Mackey February 2016

Converting react from es5 to es6

I am converting an existing react project from es5 to es6. I have babel-preset-react. When I add es6 to myFile.js I get error:

Unexpected token while parsing file.

Code:

var React = require('react');
var Input = require('../common/textInput')

var ReviewTimeOffRequestPage = React.createClass({
  let m = 0;//add this and I get an error
  render: function() {

Does babel-preset-react require a seperate es6 module?

Answers


zerkms February 2016

That's what react preset provides https://babeljs.io/docs/plugins/preset-react/:

  • syntax-flow
  • syntax-jsx
  • transform-flow-strip-types
  • transform-react-jsx
  • transform-react-display-name

So, basically those are jsx and flow-specific transformers. Which means if you use any other language features which are not covered by the 5 transformers above - you must plug those in as well.

PS: in your case having the statement within an object literal is syntactically incorrect anyway.

{
    let m = 0;
}

the code above makes no sense, since those must be key-value pairs (or function expressions), not statements.


xCrZx February 2016

babel-preset-reac doesn't contain ES6 features, to enable ES6 you should add babel-preset-es2015.


P.Brian.Mackey February 2016

This is how I resolved the issue of converting react from es5 to es6:

npm install babel-preset-react

Then configure .babelrc to use es2015:

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

linting (gulp-eslint). set es6: true in eslint.config.json

{
  "ecmaFeatures": {
    "jsx": true
  },
  "env": {
    "browser": true,
    "node": true,
    "jquery": true,
    "es6": true
  },
  "rules": {
    "quotes": 0,
    "no-trailing-spaces": 0,
    "eol-last": 0,
    "no-unused-vars": 0,
    "no-underscore-dangle": 0,
    "no-alert": 0,
    "no-lone-blocks": 0
  },
  "globals": {
    "jQuery": true,
    "$": true
  }
}

I had issues with jQuery not being found after switching from es5 to babel-preset-react. Oddly enough, I moved my jQuery import to the top of my entry point main.js and used es6 imports syntax.

main.js

//For some reason when using babel-preset-es2015 the import needs to be
//defined on two lines using the import syntax.
//It also needs to be defined at the top of this file  
//$ = jQuery = require('jquery');//didnt work
//$ = require('jquery');//didn't work
//jQuery = require('jquery');//didnt work
import $ from 'jquery';
import jQuery from 'jquery';

var React = require('react');
//...

gulpfile recipes

   //Dependencies for reference
    var gulp = require('gulp');
    var connect = require('gulp-connect');//Runs a local dev server
    var open = require('gulp-open');//Open a URL in a web browser
    var browserify = require('browserify');//bundles js
    var reactify = require('reactify');//transforms react jsx to js
    var babel = require('babelify');;//transforms es6 to es5
    var sourcemaps = require('gulp-sourcemaps');//sourcemaps for debugging
    var source = require('vinyl-so 

Post Status

Asked in February 2016
Viewed 2,572 times
Voted 9
Answered 3 times

Search




Leave an answer