Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Aleksei

"gsap is not defined" when bundling modules

Recommended Posts

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!

Link to post
Share on other sites

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.

 

 

  • Like 3
Link to post
Share on other sites

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.)

Link to post
Share on other sites

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.

 

 

 

 

  • Like 3
  • Thanks 1
Link to post
Share on other sites

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!

  • Like 1
Link to post
Share on other sites

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

 

Link to post
Share on other sites

Welcome back!

 

My guess is that you just forgot to install GSAP :)

 

npm install gsap

Does that help?

 

  • Like 1
  • Thanks 1
Link to post
Share on other sites
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!

Link to post
Share on other sites
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

  • Haha 1
Link to post
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.

×