Import issue (NPM + Vanilla js)

[kitz]

Reallllly basic starter issue, (sorry).

 

I am getting error after error trying to load GSAP into my basic project. 

 

Steps:

npm install gsap

 

That worked fine of course, but now trying to import it is doing my head in. 

 

I started by creating a js file (output.js), adding the import code from the installation page:

import { gsap } from "gsap"

 

Then imported it into my HTML as so (adding type="module" when it threw up Uncaught SyntaxError: import declarations may only appear at top level of a module output.js:1 for not having done that).

 

<script src="/dist/output. js" type="module"></script>

 

Which gives me these errors in the console:

Uncaught TypeError: The specifier "gap' was a bare specifier, but was not remapped to anything. Relative module specifiers must start with "./" ../" or "/"

 

So trying to correct this by adding:

import { gsap } from "../gsap"

 

Is now giving me different errors in the console:

! Loading module from "http://127.0.0.1:5500/gsap" was blocked because of a disallowed MIME type ("text/html"). [Learn More]

 

 

Can anyone who has been through this before point me in the right direction on where I might find a solution?

Thanks!

[Rodrigo]

Hi @kitzmiller and welcome to the GreenSock forums!

 

It seems to me that you're not properly compiling and bundling your files. In order to compile and bundle NPM modules and your custom JS Module files (where you import GSAP and other packages, export your own constants, variables, methods, objects, etc. to make them accessible in other modules) you need to run a bundler like Webpack, Vite or Parcel, just to name a few. It seems to me that the error stems from that.

 

If you want to use imports and module type scripts without using a bundler, you can fetch the files from Skypack CDN:

import gsap from "https://cdn.skypack.dev/gsap";

console.log(gsap.version);// -> 3.12.2

Hopefully this helps.

Happy Tweening!

[kitz]

Hi Rodrigo, 

 

Really appreciate the help – I was afraid that was what was holding me back! (afraid as I was desperately hoping I didn't need to bother with Webpack, as I have had so many issues in the past). 

 

I hadn't used Vite or Parcel though, after trying both, looks like Parcel was just the trick. Nice and easy to set up with features if i need them, but it (unlike Vite), didn't hold me back from starting with config woes. 

 

Mucho gracias.

Joel