Jump to content
Search Community

After webpack bundling , gsap is undefined

krissss test
Moderator Tag

Recommended Posts

Hello everyone.

I have the following issue :
Im importing in two different files gsap like this

 

import gsap from 'gsap';

 

In one of the files, im animating with CustomEase like this : gsap.to(...) 

In the other file, im imprting gsap to register PixiPlugin.
Everything works great, until i decide to deploy my app.bundle.js ( after  npm run build).
After deploy an error occurs in console: 

ReferenceError: gsap is not defined

 

I found a solution, which is importing gsap only in one file, and registering plugins there, like this :

import gsap from 'gsap';
import PixiPlugin from "gsap/PixiPlugin";
import { CustomEase } from 'gsap/CustomEase';

gsap.registerPlugin(PixiPlugin,CustomEase);
PixiPlugin.registerPIXI(PIXI);

and a few lines below, im attaching gsap to the window object like this :
 

window.gsap = gsap;

So whenever i need it, i have access to gsap from the window scope. But i don't think that solution is clever enough.


Can someone help me figuring out, why i receive the error i mentioned above after build ? 


This is how my package.json looks like: 
 

{
  "name": "ssss",
  "version": "1.0.0",
  "description": "aaaaa",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.prod.js",
    "start": "webpack-dev-server --open --config webpack.dev.js"
  },
  "author": "cccc",
  "license": "MIT",
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^2.10.0",
    "@typescript-eslint/parser": "^2.10.0",
    "eslint-loader": "^3.0.2",
    "eslint-plugin-react": "^7.17.0",
    "terser-webpack-plugin": "^2.3.0",
    "ts-loader": "^6.2.1",
    "typescript": "^3.7.3",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.9.0",
    "webpack-merge": "^4.2.2"
  },
  "dependencies": {
    "@types/gsap": "^1.20.2",
    "@types/ua-parser-js": "^0.7.33",
    "axios": "^0.19.1",
    "eslint": "^6.7.2",
    "eventemitter3": "^4.0.0",
    "gsap": "file:gsap-bonus.tgz",
    "pixi.js": "^5.2.0",
    "pixi.js-legacy": "^5.2.0",
    "ua-parser-js": "^0.7.20"
  }
}

 

Thank you in advance :)

Link to comment
Share on other sites

That sounds like an issue in your bundler related to tree shaking. You are importing gsap on that page where you're referencing it, right? It's tough to diagnose blind, buy here are a few guesses: 

  1. Try doing import { gsap } from "gsap"; instead of import gsap from "gsap";
  2. Make sure you're actually importing GSAP on the page/module where your code is that references "gsap". The error sounds like maybe you've got some code that references "gsap" somewhere that's OUTSIDE of wherever you're doing your import(s). Remember, when you import GSAP as a module, it does NOT add itself to the global scope. That's a GOOD thing (it helps keep things encapsulated). You can add all the GSAP globals to any object (including the window, as in this example) like: gsap.install(window)
  3. I noticed you have a dependency of "@types/gsap": "^1.20.2" but that's a 3rd party thing that was developed for the OLD v2 and earlier of GSAP. Delete that. Typescript stuff is now included with the official GreenSock files. 

I'm not sure what else to suggest. Maybe someone else will chime in with an idea. But you definitely should NOT need to set window.gsap = gsap. It sure sounds like you must have code somewhere outside where you're doing your import and that's causing the problem. 

 

Happy tweening!

  • Like 2
Link to comment
Share on other sites

1) I forgot to mention that import { gsap } from "gsap";  works locally, but when trying to build (npm run build), an error occurs
 

TS2614: Module '"gsap"' has no exported member 'gsap'. 
Did you mean to use 'import gsap from "gsap"' instead?  

2) I have only two references to gsap, and they are inside the modules im importing gsap.
Also to mark, that i have other modules in which im importing TweenMax,TweenLite and etc..

Edited by krissss
Link to comment
Share on other sites

1 minute ago, krissss said:

I have only two references to gsap, and they are inside the module im importing it.
Also to mark, that i have other modules in which im importing TweenMax,TweenLite and etc..

Are you using the old GSAP 2 files perhaps? 

 

Besides that I'm not sure if we can help. I suggest starting a bare bones project in your setup and seeing if you can get GSAP working. If you can, use that same setup in your actual project.

  • Thanks 1
Link to comment
Share on other sites

8 minutes ago, krissss said:

TS2614: Module '"gsap"' has no exported member 'gsap'. Did you mean to use 'import gsap from "gsap"' instead?

 

Like Jack said, make sure you uninstall @types/gsap.

 

11 minutes ago, krissss said:

Also to mark, that i have other modules in which im importing TweenMax,TweenLite and etc..

 

You don't need to import TweenLite/TweenMax, TimelineLite/TimelineMax, or any eases. Everything can now be done with the gsap object.

 

Also, installation docs.

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

 

 

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

5 minutes ago, OSUblake said:

 

Like Jack said, make sure you uninstall @types/gsap.

 

Well, after uninstalling it, a lot of errors occured.

P.C Will try to fix them, and see if that solves the problem. Will keep you updated. Thank you all !

Edited by krissss
Link to comment
Share on other sites

Just now, krissss said:

Well, after uninstalling it, a lot of errors occured.

 

Hm. Maybe try restarting your editor. And maybe try deleting your node_modules folder and doing a clean install.

 

If that doesn't help, make a simple repo showing the problem. It's very hard to troubleshoot local build problems.

 

 

  • Like 2
Link to comment
Share on other sites

guys, fixing the issues after uninstalling @types/gsap solved my issue. Now after build, there is no error that gsap is not defined :).

The issues were of sort that delayedCall does not exists in TweenMax, TweenLite and etc, so i imported everywhere gsap and used gsap.delayedCall.

Im really happy, thank you very much ! ❤️ 

  • Like 3
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...