Can GSAP be an external in an typescript compiled project?

[fuzzyfluid]

Hi, I've been working on this for two days and I figured I'd start off with an opening question with a little bit of background. I have a typescript project where I can compile GSAP as an ES module or a commonJS module and it works fine when it's bundled in my project (compiling, running, animations, etc.) However if I add gsap to the externals in my webpack, I'm getting GSAP undefined in the browser even though I have a script tag bringing in the cdn library. Not having any issues with any other 3rd party so I figured I'd ask even though it seems likely, GSAP as a 3rd party library,  wouldn't be bundled with my entire app.

[GreenSock]

It's pretty tough to troubleshoot blind but my first guess is that you've got your <script> tag that's loading GSAP **AFTER** your scripts that are actually trying to use GSAP. So maybe it's a loading order thing - put the <script> tag up higher in your HTML document, before your main JS payload that's trying to use it. If you still need help, please provide a minimal demo that clearly shows the issue and we'd be happy to take a peek. 

[fuzzyfluid]

Hi there, thanks a ton for the response but the obvious wasn't it. So I got it fixed and i'll share since someone else might stumble on this since so many people are asking this question. This is for anyone trying to reference gsap.min.js externally, compiling their bundle without gsap. If you compile your bundle with gsap, then it seamlessly works with the instructions.

 

1. Scripts tag for GSAP and all libs came before my app.bundle.js.

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
    ....More Scripts...
    <script type="text/javascript" src="js/app.bundle.js"></script>
  </body>
</html>

 

2. GSAP ES6 Module Loading (tsconfig.js):

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "noImplicitAny": true,
    "module": "ES6",
    "target": "ES6",
    "allowJs": true,
    "sourceMap": false,
    "outDir": "dev/js/"
  },
  "files": ["src/ts/app.ts",
            "node_modules/gsap/types/index.d.ts"
          ]
}

resulted in me going into my customModule.ts and adding:

import gsap from 'gsap';

and not

import { gsap } from 'gsap';

since that confined the scope. However, nonetheless, if you use import { gsap} from 'gsap'; With the braces, then what makes it work is:

private gsap:GSAP = require('gsap');

.... later down in your class...

 this.gsap.to(....);

this.gsap instead of regular gsap. Again, only if you ended up importing with import {gsap} from 'gsap';

 

3.  GSAP commonJS Module Loading (tsconfig.js):

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "noImplicitAny": true,
    "module": "CommonJS",
    "target": "es5",
    "allowJs": true,
    "sourceMap": false,
    "outDir": "dev/js/"
  },
  "files": ["src/ts/app.ts",
            "node_modules/gsap/types/index.d.ts"
          ]
}

 As mentioned in greensock docs, the above tsconfig allows you to leverage the commonJS/UMD Modules. I have these modules in my node_modules because I installed installed gsap via NPM (npm install --save-dev gsap). If my tsconfig points to commonJS and ES5, then the import changes to the following:

 

4. Switching between ES6 to commonJS modules:

import gsap from 'gsap/dist/gsap';

or 

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

same deal with the braces if you're keeping them. Scope Issues.

 

5. Here's my webpack.config:

const path = require('path');
const webpack = require('webpack');

module.exports = {
    mode: 'development',
    entry: {
        index: './src/ts/app.ts'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/app.bundle.js'
    },
    plugins: [
      new webpack.ProvidePlugin({
        gsap: './dist/js/gsap.min.js',
      }),
    ],
    module: {
      rules: [
        {
          test: /\.(ts|tsx)$/i,
          loader: "ts-loader",
          exclude: ["/node_modules/"],
        },
      ],
    },
    resolve: {
      extensions: [".tsx", ".ts", ".jsx", ".js", "..."],
    },
    externals: {
      ...other libs are here,
      gsap: 'gsap' //if this was commonJS, you would replace with: "gsap/dist/gsap": 'gsap'
    },
};

A reminder: removing the externals would just bundle everything correctly but obviously would be sizable.

Another reminder: If you were using commonJS/UMD, then gsap: 'gsap' becomes "gsap/dist/gsap": 'gsap'

 

6. Package.json for versions:

{
  "name": "",
  "version": "",
  "description": "",
  "main": "dist/index.html",
  "author": "FUZZ",
  "scripts": {
    ...................
    ...my scripts......
    ...................
    "tsc": "tsc",
    "dev": "webpack-dev-server"
  },
  "dependencies": {
    "browser-sync": "^2.27.7",
    "copyfiles": "^2.4.1",
    "cssnano": "^5.0.17",
    "jquery": "^3.6.0",
    "npm-run-all": "^4.1.5",
    "onchange": "^7.1.0",
    "postcss-cli": "^9.1.0",
    "terser-webpack-plugin": "^5.3.3",
    "webpack-visualizer-plugin": "^0.1.11"
  },
  "devDependencies": {
    "@types/jquery": "^3.5.14",
    "autoprefixer": "^10.4.8",
    "gsap": "^3.10.4",
    "html-webpack-plugin": "^5.5.0",
    "postcss": "^8.4.14",
    "postcss-loader": "^7.0.1",
    "sass": "^1.54.2",
    "sass-loader": "^13.0.2",
    "ts-loader": "^9.3.1",
    "typescript": "^4.7.4",
    "unminified-webpack-plugin": "^3.0.0",
    "webpack": "^5.74.0",
    "webpack-bundle-analyzer": "^4.5.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.9.3"
  }
}

 

Super hope this helps, folks. Let me know if you'd like me to pop this up on github or codepen.

[GreenSock]

Thanks for sharing the detailed solution. 🙌