tadas Posted July 27, 2021 Share Posted July 27, 2021 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 More sharing options...
OSUblake Posted July 27, 2021 Share Posted July 27, 2021 It sounds like your environment doesn't use es modules. Try importing the UMD files instead. https://greensock.com/docs/v3/Installation?checked=core,scrollTrigger#umd import { gsap } from "gsap/dist/gsap"; import { ScrollTrigger } from "gsap/dist/ScrollTrigger"; gsap.registerPlugin(ScrollTrigger); 1 Link to comment Share on other sites More sharing options...
tadas Posted July 28, 2021 Author Share Posted July 28, 2021 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 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 More sharing options...
Solution OSUblake Posted July 28, 2021 Solution Share Posted July 28, 2021 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. 1 1 Link to comment Share on other sites More sharing options...
OSUblake Posted July 28, 2021 Share Posted July 28, 2021 27 minutes ago, tadas said: Thank you for a quick response, but as I already wrote, this did not work. Sorry, I didn't read all the way through your post. 😳 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now