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?
That's what react preset provides https://babeljs.io/docs/plugins/preset-react/:
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.
babel-preset-reac doesn't contain ES6 features, to enable ES6 you should add babel-preset-es2015.
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-source-stream');//use conventional text streams with gulp
var buffer = require('vinyl-buffer');//buffer to allow sourcemaps to work
var concat = require('gulp-concat');//concatenates files
var lint = require('gulp-eslint');//Lint js files, including JSX
var uglify = require('gulp-uglify');
//....
gulp.task('js', function(){
browserify(config.paths.mainJs, { debug: true })
.transform(babel)
.bundle()
.on('error', console.error.bind(console))
.pipe(source('bundle.js'))
.pipe(buffer())
.pipe(sourcemaps.init({ loadMaps: true }))
// Add transformation tasks to the pipeline here.
.pipe(uglify())
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest(config.paths.dist + '/scripts'))
.pipe(connect.reload())
});
gulp.task('lint', function(){
return gulp.src(config.paths.js)
.pipe(lint({config: 'eslint.config.json'}))
.pipe(lint.format());
});