babelify: "SyntaxError: 'import' and 'export' may appear only with 'sourceType: module'"

Not sure what’s going on, but this message just started showing up…

“SyntaxError: ‘import’ and ‘export’ may appear only with ‘sourceType: module’”

Here’s the relevant bit from my gulp file:

'use strict';

var gulp = require('gulp'),
    notify = require("gulp-notify"),
    babelify = require('babelify'),
    browserify = require('browserify'),
    browserSync = require('browser-sync'),
    source = require('vinyl-source-stream'),
    uglify = require('gulp-uglify'),
    buffer = require('vinyl-buffer');

var vendors = [
  'jquery',
  'moment',
  'd3',
  'queue-async',
  'react',
  'react-dom',
  'react-bootstrap',
  'react-infinite',
  'lodash',
  'rc-switch',
  'rc-slider',
  'he',
  'react-debounce-input',
  'react-swipe-views',
  'react-modal',
];


gulp.task('app', function () {
    var stream = browserify({
            entries: ['./app/app.jsx'],
            transform: [babelify],
            debug: false,
            extensions: ['.jsx'],
            fullPaths: false
        });

    vendors.forEach(function(vendor) {
        stream.external(vendor);
    });

    return stream.bundle()
                 .pipe(source('build.min.js'))
                 .pipe(buffer())
                 .pipe(uglify())
                 .pipe(gulp.dest('build/js'))
                 .pipe(notify("Successfully built build.min.js file!"));

});

I’m not sure what happened, but things were fine just a few days ago. Thanks!

About this issue

Original URL
State: closed
Created 9 years ago
Comments: 20 (9 by maintainers)

Commits related to this issue

stupid babelify fix (https://github.com/babel/babelify/issues/136#issuecomment-173809406) — committed to chrislawes/Vue-GitHub-User-Search by chrislawes 7 years ago

Most upvoted comments

You upgraded to babelify 7.0, which uses the new babel 6.0, and you’re missing options. Please checkout the README.

+58

zertosh on Nov 2, 2015

I’m sorry you feel that way. I offered to personally debug your issue if you provided me with some code. I didn’t meant to offend. Please remember that we’re all volunteers here and just trying to make cool things.

+37

zertosh on Dec 22, 2015

Nope. Changed the options along with it. Apparently everyone using the Material UI latest branch is having the same issues. The documentation is also pretty over elaborate. If you want people to use your library, it would be a good idea not to make it a hassle or respond in a dickish manner to people who use it. Improving the documentation or simply giving a few hints or a simple list would go a lot further to keep developers without years of time to configure things to use your product. On Dec 22, 2015 4:06 PM, “Andres Suarez” notifications@github.com wrote:

After downgrading, everything works perfectly

That goes to show that you’re likely not passing the correct options. Correct babel 5 options don’t work for babel 6, and correct babel 6 options don’t work for babel 5.

— Reply to this email directly or view it on GitHub https://github.com/babel/babelify/issues/136#issuecomment-166729490.

+34

rob2d on Dec 22, 2015

Hi @jmm

Thanks for the fast answer.

Sorry for the poor repro… yesterday i was in a damn rush, and probably i would have done better to wait until today to submit the repro.

Thanks for the link. I confirm that adding this:

"browserify": {
    "transform": [["babelify", { "presets": ["es2015"] }]]
}

to the package.json of the required file, solved my problem.

+24

brunoscopelliti on Jan 22, 2016

I had this issue because a dependency included import/export but did not specify its local babel plugins – i needed to apply babelify as a global transform browserify -g [ babelify --presets [ @babel/preset-env ] ]

kumavis on Jan 20, 2019

I had a similar problem connected to eslint.

  1:1  error  Parsing error: 'import' and 'export' may appear only with 'sourceType: module'
  ...
  ESLintError: Failed with 1 error

I added some parserOptions in my package.json and it all ran smooth.

  "eslintConfig": {
    "env": {
      "es6": true,
      "node": true,
      "browser": true
    },
    "parserOptions": {
        "ecmaVersion": 6,
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true
        }
    },
    "rules": {
      "quotes": [
        2,
        "single"
      ]
    }
  }

I hope this helps someone 😃

spoeken on May 24, 2016

@rob2d I understand your frustration, but…I could definitely show you maintainers responding in a d****** manner, but I’m really not seeing it here (unless editing has happened, which I doubt).

not very helpful! I have read through all of the docs and am having the same issues…

By the same token, there’s nothing that can be done for you without a better explanation of what you’re experiencing, preferably, as @zertosh said, in the form of a repo with a minimal reproduction. Simply posting a comment on another user’s closed issue, who probably was having the stated problem, saying that you’re having the same problem doesn’t give anyone anything to go on to help you, except for @zertosh’s suggestion that your problem probably has the same cause as the OP’s, which you took exception to. Your followup comments haven’t provided more information either, except that the problem may relate to:

using the Material UI latest branch

I don’t know what that is. That suggests that there may be some problem specific to whatever that is. There’s no telling at this point.

The documentation is also pretty over elaborate.

I would be surprised if there isn’t room for improvement in the documentation (there certainly is a lot of room for it with Babel itself), but again, there’s nothing specific here to go on.

or simply giving a few hints or a simple list

I don’t know what the hints or list items would be. The hint given to the OP here was to configure options, which is all that a lot of people were missing (many because they simply transitioned to a new major version without looking into what changed).

You’re free to switch to Webpack, but I imagine you’ll be disappointed if you think that means you won’t have to learn how to configure it or won’t have any problems. I’ve seen a number of reports recently from people having problems using Webpack with Babel. Especially consider that most (all?) people using Babel with Webpack probably use the babel-loader plugin that’s also under the umbrella of this same organization.

jmm on Dec 22, 2015