Chapter 8 "Unexpected token" error with jsx pre-processing

[toddharding]

When attempting to run the final 2 test suites from chapter 8 they fail with this error:

SyntaxError: /home/user/snapterest/source/components/__tests__/Header-test.js: 
Unexpected token (
var header = TestUtils.renderIntoDocument(
>    <Header text="Testing..." />
      ^

This error was resolved by adding a .babelrc file to the root of the project with the contents:

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

Is this fix required or did I make a mistake whilst working through the chapter?

[fedosejev]

@toddharding you've probably installed babelify version 7 (can you please check in your package.json file?). In the book, I am describing version 6 (the latest version at the time of writing). There is a fix required to install version 6: npm install --save-dev babelify@^6.2.0.

[dsinkey]

@toddharding I'm using babelify 6.4 and I'm getting the same thing. I found on this blog that using the .babelrc file is almost a necessity now, but how do you create it? When I try and create ".babelrc" in the root of the project it says files that begin with a dot "." are reserved for the system.

http://jamesknelson.com/the-six-things-you-need-to-know-about-babel-6/

[toddharding]

@dsinkey If you are using OS X I believe you have to enable show hidden files in order to be able to create files that begin with a "." http://www.instructables.com/id/Show-hidden-files-in-Mac-OS-X/

[toddharding]

@fedosejev I checked the package.json and I was using version 7 of babelify, the change you advised allowed my tests to work, but came up with various errors when I came to package the application with Gulp, so I went back to using the .babelrc and version 7 of babelify.

[fedosejev]

@toddharding does your gulpfile.js look like this:

var gulp = require('gulp');
var browserify = require('browserify');
var babelify = require('babelify');
var source = require('vinyl-source-stream');

gulp.task('default', function () {
  return browserify('./source/app.js')
    .transform(babelify)
    .bundle()
    .pipe(source('snapterest.js'))
    .pipe(gulp.dest('./build/'));
});

[Chiva-Zhao]

@toddharding I have the same issue and fix it according your advice, thank you! And i use babelify version 7

[sharmaudi]

I was also facing the same issue with Babel version 7.2.0. Fixed using the following steps:

Install the Babel react preset using npm: npm install --save-dev babel-preset-react

Use the react preset in your gulp file. Here is my working gulpfile.js:

var gulp=require('gulp');
var browserify=require('browserify')
var babelify = require('babelify')
var source = require('vinyl-source-stream')
gulp.task('default', function() {
return browserify('./source/app.js')
.transform(babelify,{presets: ["react"]})
.bundle()
.pipe(source('snapterest.js'))
.pipe(gulp.dest('./build/'));
});

My package.json:

{
  "name": "snapterest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-preset-react": "^6.3.13",
    "babelify": "^7.2.0",
    "browserify": "^13.0.0",
    "gulp": "^3.9.0",
    "vinyl-source-stream": "^1.1.0"
  },
  "dependencies": {
    "react": "^0.14.6",
    "react-dom": "^0.14.6"
  }
}