Uncaught TypeError: Failed to resolve module specifier "gsap/dist/gsap".

[EmilB94]

Hello,

 

I am relatively new to programming, and as a start I wanted to try to just get one of the demos on codepen () working on my local environment. I bought the ShockinglyGreen membership and installed + registered through NPM, and it seems to have correctly imported all plugins into node_module:

 

However, I keep getting the following error, and the animations are not working correctly:

 

I am importing the plugins using the official GSAP syntax:

 

// Import the GSAP library and plugins using ES modules

import { gsap } from "gsap";

import { ScrollTrigger } from "gsap/ScrollTrigger";

import { ScrollSmoother } from "gsap/ScrollSmoother";

 

// Register Plugins

gsap.registerPlugin(ScrollTrigger, ScrollSmoother);

 

See the Pen JjmLLWZ by GreenSock (@GreenSock) on CodePen

[EmilB94]

Do I need to list each unique plugin as a dependency in the .json file? Cause as I understood it, I don't..

 

 

 

 

[Cassie]

Hi there!

 

I can't see your whole sidebar there, but unless you're using some sort of framework/bundler, you may want to just use the minified files in script tags.

 

If you can let me know more about your setup I can help!

[GreenSock]

Yeah, it's tough to diagnose from just a few screenshots like that - a minimal demo that clearly illustrates the issue is always best but I wonder if maybe you're trying to use GSAP inside a <script type="module"></script> tag (and not using some kind of bundler)? If so, browsers require that you use relative paths when you import, and use the file name like: 

import { gsap } from "./gsap/gsap.js";
import { ScrollTrigger } from "./gsap/ScrollTrigger.js";
import { ScrollSmoother } from "./gsap/ScrollSmoother.js";

But like Cassie said, if you're just trying to use the scripts directly in the browser like that (without any bundler), it'd be easier and more efficient to just load the files using standard <script> tags and no imports at all, like: 

<script src="gsap/gsap.min.js"></script>
<script src="gsap/ScrollTrigger.min.js"></script>
<script>
  // your code here...
</script>

(that assumes you put the files in a "gsap" folder that's in the same directory as the file this code is in)

[EmilB94]

Thanks for the answers. It works flawlessly using Parcel now.

 

Now the problem is actually getting stuff to do what I want, but that's a whole other topic 😄