"gsap is not defined" when bundling modules

[Aleksei]

Hi!
I have gsap installed as a node module.

And I have Webpack which gathers all modules from stack.js and outputs minified bundle.

When I load the JS bundle into the page returns error that "gsap is not defined". The gsap modules are added because bundle's size is over 90kB.  

 

stack.js

import { gsap } from 'gsap';
import { CSSPlugin } from 'gsap/CSSPlugin';
import { Draggable } from 'gsap/Draggable';
import { InertiaPlugin } from 'gsap/InertiaPlugin';
gsap.registerPlugin(CSSPlugin, Draggable, InertiaPlugin);
import '../build/my_module.min.js';

my_module.js (if we exclude all ES6 wrapping) looks like this:

let moduleFunction = function() {

	'use strict';

	const hello = 'hello!';
	console.log(hello);
	window.hello = hello;

	gsap.set('body > div', {
		backgroundColor: '#333333'
	});

}

moduleFunction();

Whenever I call gsap methods it appears to be undefined. If I exclude gsap from my module everything works fine.

Spent long time online trying to fix this, but nothing helped. What I'm doing wrong?

 

Thanks!

[OSUblake]

That is not how modules are designed to work. You are supposed to import every dependency you need in every file. That is modular design, which means you should be able to just copy and paste that file into another project and have it just work.

 

And you DO NOT need to import the CSSPlugin.

 

my-module.js

import { gsap } from "gsap";

let moduleFunction = function() {

	'use strict';

	const hello = 'hello!';
	console.log(hello);
	window.hello = hello;

	gsap.set('body > div', {
		backgroundColor: '#333333'
	});

}

moduleFunction();

 

Another way to do imports with gsap.

 

 

[Aleksei]

Ok, I’ll check my files once again.

But what if I want my_module.js to use GSAP, but don’t import it into the module itself? Let’s say, my_module.js, together with GSAP, is just one of many modules used in another JS file.
(Because it seems to me that I tried this approach and it didn’t work.)

[OSUblake]

Again, that is not how modules are designed to work. You need to import gsap in every file that uses it. imports are scoped to the file, not globally.

 

 

 

 

[GreenSock]

Just to add a little clarity, GSAP's ES Modules don't create globals (on purpose) because that's frowned upon and goes against the whole idea of modules. However, you can gsap.install(window) to have it add all of its globals to the window object (or whatever). That basically makes it global at runtime. But like Blake said, it's probably not best to write your modules in a way that depends on pre-existing globals because it's mixing paradigms, but I suppose it's up to you ultimately. Just be careful 

 

Happy tweening!

[beau_dev]

hello GSAPPERS! It's been a long time since I've been here. I love this forum, I'm finally given the freedom to use GSAP in prod ... Wooohoo~!

 

And GSAP3.0  ftfw!~!!! just in time!

 

...okay...

 

Now that that's said.

 

I'm building in gastby/react, netlify.

 

I'm importing thus:

 

import gsap from "gsap";

And I'm receiving the error on Netlify Build...

 

"10:29:47 PM: Can't resolve 'gsap' in '/opt/build/repo/src/components/calendar'"

 

I have also tried...

import {gsap} from "gsap";

And I'm receiving the same error.

 

Would anyone kindly please advise?

 

 

My repo is here, by the way.

calendar widget

 

Many great thanks to the gents & ladies at GSAP & these forums.

 

Learning from you guys has helped to land me a job.

Best,

 

Beau

 

[GreenSock]

Welcome back!

 

My guess is that you just forgot to install GSAP

 

npm install gsap

Does that help?

 

[OSUblake]

And you'll probably need to import the UMD files for Gatsby.

 

import { gsap } from "gsap/dist/gsap";

 

Scroll down and check out the install helper.

https://greensock.com/docs/v3/Installation#umd

 

[Aleksei]

On 12/14/2019 at 5:08 PM, OSUblake said:

Again, that is not how modules are designed to work. You need to import gsap in every file that uses it. imports are scoped to the file, not globally.

Got it! Thanks.

Sorry for silly questions — don't have enough experience working with ES6 modules. I was afraid that if I import GSAP to both files it will double the size of the bundle. But Webpack deals with it and uses GSAP only once.

Thanks again!

[beau_dev]

20 hours ago, GreenSock said:

Welcome back!

 

My guess is that you just forgot to install GSAP

 

npm install gsap

Does that help?

 

Um... lol... ::facepalm::

nice..~!

 

Cheers!

-B