Search code examples
node.jsreactjsmeteornpmgsap

Use gsap node module with Meteor

I'm trying to use the 'gsap' node module, explicitly the tool 'Draggable' of that package together with Meteor (a plain Meteor React app).

The installation via meteor npm install gsap works as expected. However if i want to use the module in my code as suggested in the docs, the client crashes with multiple consecutive errors; the first is:

Uncaught SyntaxError: Unexpected identifier modules.js:132661

The suggested way to import gsap tools is shown here. The error appears when i try to import a sub-module like so:

import Draggable from 'gsap/Draggable';

I don't quite understand the problem here. With other modules a simple npm install and import x from y just works. With gsap modules that does not seem to be the case. I'd be grateful for any advice.

Update:

It seems the import of 'gsap' node module is now working! Thanks for your answers!

I had some issues with Draggable import, as gsap wasn't defined inside of its constructor ("_toArray is not a function"). To make it work you have to register the plugin to gsap (added lines in main.jsx): 

import { gsap } from "gsap";
import { Draggable } from 'gsap/Draggable';

gsap.registerPlugin(Draggable);.
Solution

  • The gsap package contains ES6 code. ES6 in the node_modules folder is not compiled by Meteor. Usually when publishing to npm, packages are transpiled into ES5. The editor of gsap should do it.

    Two options for you to make this work inside Meteor:

    • Option 1: clone the source from github directly somewhere in your Meteor app, like /imports/lib/gsap. Then import as following import Draggable from '/impots/lib/gsap/Draggable';

    • Option 2: clone the source from github directly somewhere outside your Meteor app and use npm install /path/to/the/cloned/folder inside your meteor app (see here for reference). Option 2 seems less robust to me when working as a team in the same project or when you will need to deploy your app