Browserify + Gulp + Babelify ~ import' and 'export' may appear only with 'sourceType: module

528 views Asked by At

I'm working on a project and want to use gulp to automate some tasks, to compile js and other code. I'm using Browserify and Babelify in combination with the babel-eslint to set my sourcetype to module however i still get this ParseError when I'm trying to import node_modules in my main.js file

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

Is there a way to fix this?

My gulp file

const gulp = require('gulp');
const sass = require('gulp-sass');
const minify = require('gulp-minify');
const rename = require('gulp-rename');
const browserify = require('browserify');
const babelify = require('babelify');
const tap = require('gulp-tap');
const flatmap = require('gulp-flatmap');
const logger = require('gulplog');
const source = require('vinyl-source-stream');
const sourcemaps = require('gulp-sourcemaps');
const buffer = require('vinyl-buffer');
const babel = require('gulp-babel');
const plumber = require('gulp-plumber');

gulp.task('default', function () {
  let b = browserify({
    entries: './resources/js/main.js',
    debug: true,
    cache: {},
    packageCache: {},
    fullPaths: true,
    transform: [babelify.configure({
      presets: ['@babel/preset-env']
    })]
  })

  return b.bundle()
    .pipe(source('main.js'))
    .pipe(buffer())
    .pipe(sourcemaps.init({loadMaps: true}))
    // Add other gulp transformations (eg. uglify) to the pipeline here.
    .on('error', (error) => {
      logger.error(error);
    })
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest('./public/js/'));
});

Package.json

{
  "name": "portfolio",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "bulma": "^0.9.0"
  },
  "devDependencies": {
    "@babel/cli": "^7.10.5",
    "@babel/core": "^7.10.5",
    "@babel/preset-env": "^7.10.4",
    "@vizuaalog/bulmajs": "^0.11.0",
    "babel-eslint": "^8.2.6",
    "babelify": "^10.0.0",
    "browserify": "^16.5.1",
    "eslint": "^4.19.1",
    "gulp": "^4.0.2",
    "gulp-babel": "^8.0.0",
    "gulp-flatmap": "^1.0.2",
    "gulp-minify": "^3.1.0",
    "gulp-plumber": "^1.2.1",
    "gulp-rename": "^2.0.0",
    "gulp-sass": "^4.1.0",
    "gulp-sourcemaps": "^2.6.5",
    "gulp-tap": "^2.0.0",
    "gulplog": "^1.0.0",
    "node-sass": "^4.14.1",
    "vinyl-buffer": "^1.0.1",
    "vinyl-source-stream": "^2.0.0"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "browserify": {
    "transform": [
      [
        "babelify",
        {
          "presets": [
            "@babel/preset-env"
          ]
        }
      ]
    ]
  },
  "author": "",
  "license": "ISC"
}

eslint.rc

{
  "ecmaFeatures": {
    "modules": true,
    "spread": true,
    "restParams": true
  },
  "env": {
    "browser": true,
    "node": true,
    "es6": true
  },
  "rules": {
    "no-unused-vars": 2,
    "no-undef": 2
  },
  "parser": "babel-eslint",
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module"
  }
}
0

There are 0 answers