I think I"m missing something on how this works

I keep having issues when importing npm packages with ES6 and geting the SyntaxError: 'import' and 'export' may appear only with 'sourceType: module' error. I’ve updated modules, changes settings, changed methods for setting settings from gulp to .babelrc and gone through about 100 stack overflow questions, articles, and git issues. And the only thing that can solve the problem is settings global: true on my babelify transform. Which takes compile times from 500ms to 17seconds for a singe import.

There is one other solution I see, and I’ve seen it parroted about the internet and it is confusing the hell out of me. Everyone is saying to add "browserify": { "transform": [ "babelify" ] } to the imported npm modules package.json. Which strikes me as completely idiotic as that defeats the entire point of importing a module as I understand it. I can no longer just clone my repo and npm install, i have to hen go through a dosen files, ignore my IDE’s popup warnings to not change a file in node_modules then add the line to fix the issue.

I’ve seen this answer here And am so confused as to why this is the solution. I can only assume I"m missing something extremely basic and low level but I just can’t work out what that might be.

package.json "devDependencies": { "babel-core": "^6.26.0", "babel-plugin-transform-runtime": "^6.23.0", "babel-preset-env": "^1.6.1", "babel-preset-es2015": "^6.24.1", "babel-preset-stage-0": "^6.24.1", "babelify": "^8.0.0", "browser-sync": "^2.23.7", "browserify": "^14.5.0", "del": "^3.0.0", "gulp": "^3.9.1", "gulp-autoprefixer": "^4.1.0", "gulp-cssnano": "^2.1.3", "gulp-eslint": "^4.0.2", "gulp-sass": "^3.2.1", "gulp-scss-lint": "^0.5.0", "gulp-sequence": "^0.4.6", "gulp-sourcemaps": "^2.6.4", "gulp-uglify": "^3.0.0", "jshint": "^2.9.5", "node-normalize-scss": "^3.0.0", "vinyl-buffer": "^1.0.1", "vinyl-source-stream": "^2.0.0" }

gulpfile.js gulp.task('js:compile', ['js:lint'], function () { return browserify({ entries: paths.js + '/main.js', debug: true }) .transform("babelify", { global: true, presets: [ 'env' ] }) .bundle() .pipe(source('main.js')) .pipe(buffer()) .pipe(gulp.dest(paths.buildJs)); });

[goto-bus-stop]

Browserify doesn’t run transforms (including babelify) on dependencies in node_modules by default, because npm modules should be self contained and browserify doesn’t want to encourage dependencies relying on global config.

If a package only publishes as ES modules (a little premature IMHO…) it would indeed be best to only enable a transform for that package. One way to do it is by editing its package.json but this is obviously not greeat as you mention.

Another way is to use a transform filter. Eg tfilter can run transforms on specific files only:

# -t enables the transform for your local files
# -g with adds a global transform, but tfilter ensures it only runs on the dependency
browserify \
  -t babelify \
  -g [ tfilter --include 'node_modules/OFFENDING-PACKAGE/**/*.js' babelify --presets env ] app.js

browserify()
  .transform(babelify)
  .transform(tfilter(babelify, { include: 'node_modules/OFFENDING-PACKAGE/**/*.js' }), {
    global: true,
    presets: ['env']
  })

[ashnur]

This is actually an issue where it is really hard to find the right answer, if there is one even, rather than just closing it, why not give some pointers too? This issue was one of the worst to deal with when using babelify for the past 4 years…