Import GSAP with modern js

[MrWhiteSky]

Hi,

 

I try to import gsap with modern js (no bundler), like this :

 

import {gsap} from "../../node_modules/gsap/dist/gsap.min.js";

 

But I get this error :

Uncaught SyntaxError: The requested module '../../node_modules/gsap/dist/gsap.min.js' does not provide an export named 'gsap'

 

The import can work without bundler ?

 

Thanks

[mvaneijgen]

Have you seen the install helper on the docs https://greensock.com/docs/v3/Installation?checked=core#umd? You can just check what you want and it tells you how to import the modules.

 

 

[MrWhiteSky]

Yes I have see the install helper docs, I did a

npm install gsap

After I have try to import like this :

import { gsap } from "gsap";

But in my browser I get the error :

Uncaught TypeError: Failed to resolve module specifier "gsap". Relative references must start with either "/", "./", or "../".

So it's why I have try to call directly the .js file like my previous post.

 

Have you an idea of the problem ?

Thanks

[Cassie]

Heya, not sure what your project looks like - but it sounds like you should be using the script tags if you don't have a build setup.

[GreenSock]

You're trying to use standard ES5 files (the minified ones that you'd normally load via a standard <script> tag) as if they are ES Modules. That won't work. It has nothing to do with GSAP - it's just a JavaScript/browser standard.

 

There are basically two types of JavaScript files in general: 

 

ES Modules

These are more modern and they can have things like "import", "export", etc. For a long time, browsers didn't support them very well, so bundlers and build tools sprung up that would "transpile" them for you. You'd use something like NPM to "install" them in a local project, using the modern modules formatted files and then when you're ready to deploy, your build tool would process everything and spit out standard ES5 minified files that you'd load into the browser with a standard <script> tag. Universal compatibility. 

 

ES5 files

That's just another name for regular old JavaScript files that don't have all the modern features of ES Modules. No imports, no exports, none of the fancy stuff. But ALL browsers understand ES5 files. Zero compatibility problems. 

 

If you want to load an ES Module JavaScript file directly into the browser, there are two requirements: 

1. You must add type="module" to your script tag
2. You must specify a relative path to the file. I think some browsers also require that the file end in ".js" as well. 

<!-- ES5 (universal compatibility) --> 
<script src="./gsap/dist/gsap.min.js"></script>
  
<!-- ES Module (modern) --> 
<script type="module" src="./gsap/gsap.js"></script>

Again, none of this is specific to GSAP. It's just how browsers work. 

 

So you just need to decide if you are gonna use the standard ES5 minified files -OR- if you want to use the ES Modules. We provide both so that you can do whatever you want. Just follow the associated standards for getting that type into your project. The core problem in your original post was that you were using the old ES5 file as if it was an ES Module. Try the correct path: 

// bad
"../../node_modules/gsap/dist/gsap.min.js"

// good
"../../node_modules/gsap/index.js"

But that's very unusual to see someone importing like that from the node_modules because the existence of node_modules indicates you're using a build tool of some kind and those almost always allow you to just reference the package by name directly rather than using relative paths. I have no idea what your project looks like, though. And your original post makes it sound like you're literally placing a <script> tag manually into your HTML and trying to load things locally. Again, very unconventional but not necessarily "wrong". It's quite odd, though, because when you deploy your project, you'd actually end up having a node_modules folder on your server with the various packages. I don't think I've ever seen that before and it seems rather wasteful. 🤷‍♂️

 

Does that clear things up? 

[Cassie]

This is a top-tier explanation 💜 Saving this for linking to