3

This follows on from this question: Splitting React components into separate files

I'm trying to get into React, seems fun. I'm using Gulp to transpile but getting the following error:

ParseError: 'import' and 'export' may appear only with 'sourceType: module'

The offending jsx file is:

import React from 'react';

class Square extends React.Component{
    render() {
        return (
            <p>Square</p>
        )
    }
}

export default Square;

My Gulp file is:

var vendors = [
    'react'
];

gulp.task('vendors', function () {
    var stream = browserify({
        debug: false,
        require: vendors
    });

    stream.bundle()
        .transform('babelify', {presets: ['es2015', 'react']})
        .bundle()
        .pipe(source('./src/main.js'))
        .pipe(gulp.dest('./dist/bundle.js'));

    return stream;
});

And my package.json in case is:

{
  "name": "reacttestone",
  "version": "1.0.0",
  "description": "Testing React Components",
  "main": "index.js",
  "dependencies": {
    "react": "^0.14.2",
    "react-dom": "^0.14.2"
  },
  "devDependencies": {
    "babel-preset-es2015": "^6.1.2",
    "babel-preset-react": "^6.1.2",
    "babelify": "^7.2.0",
    "gulp": "^3.9.0",
    "vinyl-source-stream": "^1.1.0"
  },
  "browserify": {
    "transform": [
      "babelify"
    ]
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Myself",
  "license": "MIT"
}

Any thoughts? Thank you. So close to finding a Javascript library for front end I like :)

Community
  • 1
  • 1
Andrew
  • 141
  • 2
  • 11
  • Getting the same error, see http://stackoverflow.com/questions/35403131/modules-exported-using-es6-syntax-for-the-browser. Have you got any progress? – jacquard Feb 15 '16 at 09:31

0 Answers0