GSAP with CDN

[retug]

Total beginner here, followed a tutorial online that used gsap with an NPM install and now I want to push my code up to my website and I am running into some errors.

 

I have the following html code:

 

<script type="importmap">
  {
    "imports": {
      "three" : "https://unpkg.com/three@0.126.1/build/three.module.js",
      "orbitcontrols" : "https://unpkg.com/three@0.126.1/examples/jsm/controls/OrbitControls.js",
      "datgui" : "https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.9/dat.gui.min.js",
      "gsap" : "https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"
    }
  }
</script>
<script type="module" src="{% static 'blog/threeBackground.js' %}"></script>

 

This is then imported in my .js file as follows:

 

import * as THREE from 'three';
import { OrbitControls } from 'orbitcontrols';
import * as dat from 'datgui';
import { gsap } from 'gsap';

 

Upon running my dev server, I get the following error:

 

Uncaught SyntaxError: The requested module 'gsap' does not provide an export named 'gsap'

 

I did some googling and found this similar topic, but I still can't seem to figure out what is wrong with my code.

 

I have tried moving the gsap import out and into its own script tag with a type = "module" tag as it appears was suggested, but that was throwing some errors as well. Any thoughts on how to solve would be much appreciated! 

 

Thanks!

[GreenSock]

I've never seen an approach like that before. Is there a reason you're not just loading the regular minified files (like gsap.min.js) from the CDN via a standard <script src="..."></script> tag? 

 

It looks like you're loading the standard ES5 file via the CDN, but you're trying to use it as an ES Module which won't work (as the error message indicated). Maybe try using something like https://cdn.jsdelivr.net/npm/gsap@3.10.4/index.js which is an ES Module with exports. We provide the files in various formats (UMD, ES Modules, raw source, a .tgz file, a zip download with everything).

 

This page might help: 

https://greensock.com/install

 

See https://www.jsdelivr.com/package/npm/gsap for various file options on a CDN.

[retug]

Thanks for the reply Jack.

 

"Is there a reason you're not just loading the regular minified files (like gsap.min.js) from the CDN via a standard <script src="..."></script> tag? "

 

There is not, total beginner here and appreciate you pointing me in the right direction.

 

I want to follow the method you have outline above, how do I reference the script tag in my .js file? (sorry, I am sure this is a super beginner question)

 

html :

 

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>

javascript (not sure what the import should look like):

 

import { gsap } from 'gsap'

 

Thanks!

 

[GreenSock]

When you load GSAP in a normal <script> tag, it is global so you don't need to worry about any imports at all.

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
<script>
  // no import necessary
  gsap.to("body", {backgroundColor: "red", duration: 3});
</script>

 

Modern build systems have added a lot of confusion to the mix, frankly. What I outlined above was the standard way of using JavaScript for many years but now there are all kinds of build tools, NPM, Yarn, etc. and everybody has their own opinions about what is "best". We try to provide the tools in various formats so people can fit them into any workflow, but of course that comes at the cost of some confusion when you see so many options. 

 

I hope that clears things up. Enjoy!

[retug]

Wow, thank you! I was making this very difficult.