CODEWITHSUNDEEP
reactjsgulpbabeljsbrowserify
Alvaro
Alvaro

Reputation: 12037

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

I'm trying to build a project with this simple structure:

app
 |-- components
 |       |-- App.jsx
 |       |-- Root.jsx
 |-- index.jsx

index.jsx looks like this:

import React from 'react';
import { createStore } from 'redux';
import { render } from 'react-dom';

import Root from 'app/components/core/Root';

const store = createStore();

render(<Root store={ store } />, document.getElementById('root'));

and Root.jsx looks like this:

import React from 'react';
import { Provider } from 'react-redux';
import { BrowserRouter, Route } from 'react-router-dom';

import App from 'app/components/core/App';

const Root = ({ store }) => {
    return <Provider store={ store }>
        <BrowserRouter>
            <Route path='/' component={ App } />
        </BrowserRouter>
    </Provider>
};

Root.propTypes = {
    store: React.PropTypes.object.isRequired,
};

export default Root;

I create a gulp file this way, specifying the (I think) correct processors for Babelify:

var gulp = require('gulp'),
buffer = require('vinyl-buffer'),
browserify = require('browserify'),
babelify = require('babelify'),
source = require('vinyl-source-stream'),
gutil = require('gulp-util');


gulp.task('build', function () {
    var browserifyOptions = {
        debug: true,
        entries: './app/index.jsx',
        extensions: ['.jsx', '.js'],
    };

    return browserify(browserifyOptions)
        .transform(babelify.configure({
            presets: ['es2015', 'react']
        }))
        .bundle()
        .on('error', gutil.log)
        .pipe(source('app.js'))
        .pipe(buffer())
        .pipe(gulp.dest('./lima/static'));
});

gulp.task('default', ['build']);

Now the strange thing is I get this:

Root.jsx:1
import React from 'react';
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module'

The weird thing is that index.jsx seems to work just fine and if I remove any of the babel presets I get errors in that file instead. What can be wrong about Root.jsx or my gulpfile?

Upvotes: 1

Views: 3750

Answers (1)

sam
sam

Reputation: 2820

You need to add { modules: false } to your gulpfile:

presets: [['es2015', { modules: false }], 'react']

Upvotes: 1

Related Questions