Jump to content
Search Community

Unable to import plugins...

tadas test
Moderator Tag

Go to solution Solved by OSUblake,

Recommended Posts

Hey,
Whenever I try to import a plugin the build fails with this message:

SyntaxError: 'import' and 'export' may appear only with 'sourceType: module' (758:0) while parsing /node_modules/gsap/ScrollTrigger.js while parsing file: /node_modules/gsap/ScrollTrigger.js
    at DestroyableTransform.end [as _flush] (/node_modules/insert-module-globals/index.js:114:21)

If I only import 'gsap' it works perfectly. 

 

Gulpfile.js:

const { watch, series, parallel, src, dest } = require('gulp')
const sourcemaps = require('gulp-sourcemaps')
const plumber = require('gulp-plumber')
const eslint = require('gulp-eslint')
const uglify = require('gulp-uglify')
const browserify = require('browserify')
const buffer = require('gulp-buffer')
const tap = require('gulp-tap')
const log = require('gulplog')

function buildScripts(cb) {
  src('js/**/*.js')
    .pipe(plumber())
    .pipe(eslint())
    .pipe(eslint.format())
    .pipe(tap(function (file) {
      log.info('bundling ' + file.path);

      // replace file contents with browserify's bundle stream
      file.contents = browserify(file.path, {
          debug: true
        })
        .transform('babelify', {
          presets: ['@babel/preset-env']
        })
        .bundle()
    }))
    // transform streaming contents into buffer contents (because gulp-sourcemaps does not support streaming contents)
    .pipe(buffer())
    .pipe(sourcemaps.init())
    .pipe(uglify())
    .pipe(sourcemaps.write('.'))
    .pipe(dest('dist'))

  cb()
}

 

If I import from 'gsap/dist/ScrollTrigger', then the build no longer fails. But then I am unable to register the plugin in browser and get this message:
 

Uncaught TypeError: n.gsap.registerPlugin(...) is not a function
    at Object.1.gsap

The transpiled line that throws an error looks like so:

_gsap.gsap.registerPlugin(_ScrollTrigger.ScrollTrigger)(function () {


Any idea what is going on? 

Thanks!

Link to comment
Share on other sites

Thank you for a quick response, but as I already wrote, this did not work.
 

19 hours ago, tadas said:

If I import from 'gsap/dist/ScrollTrigger', then the build no longer fails. But then I am unable to register the plugin in browser and get this message:
 


Uncaught TypeError: n.gsap.registerPlugin(...) is not a function
    at Object.1.gsap

The transpiled line that throws an error looks like so:


_gsap.gsap.registerPlugin(_ScrollTrigger.ScrollTrigger)(function () {


Any idea what is going on? 

Thanks!


However I just manage to figure it out what was causing the bug I just mentioned. 
It was my writing style... I do not use semicolons, and the next line after the call to register the plugin was

 

(function () {


Not 100% sure why this happened, but now I will be forever paranoid about this type of bug :D Might reconsider my decision to write js without semicolons.

 

On ES modules. 

I have found on Babelify's github page, that Browserify does not take node_modules into account.

Quote

Why aren't files in node_modules being transformed?
This is the default browserify behavior.

A possible solution is to add:

{
  "browserify": {
    "transform": ["babelify"]
  }
}
to the root of all your modules package.json that you want to be transformed.


Tried adding that to gsap's package.json, but that did not fix the problem.

 

In any case. UMD way seems to be working and that's good enough for me. 

Cheers

Link to comment
Share on other sites

  • Solution
11 minutes ago, tadas said:

However I just manage to figure it out what was causing the bug I just mentioned. 
It was my writing style... I do not use semicolons, and the next line after the call to register the plugin was

 

Yep. You have to make sure there is a semi-colon before any IIFEs and after all your return statements. I think it's a pretty good idea to always use semi-colons, even if JavaScript doesn't technically require them.

 

Not sure what's up with the babelify thing. It looks like that package hasn't been updated since 2018, so maybe it only works with certain versions of babel, and I thought browserify was kind of dead.

 

If you want a really simple build experience, check out snowpack or parcel.

 

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...