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