Problems importing ScrollTrigger

[pguardiario 0 Likes (Newbie)]

I'm confused about how to import ScrollTrigger into my svelte app.

I tried:

<script>

  import gsap from 'gsap';

  import { ScrollTrigger } from 'gsap/ScrollTrigger';

 

And I'm seeing:

500

Cannot use import statement outside a module

C:\User\node\gsap\node_modules\gsap\ScrollTrigger.js:12
import { Observer, _getTarget, _vertical, _horizontal, _scrollers, _proxies, _getScrollFunc, _getProxyProp, _getVelocityProp } from "./Observer.js";

Thanks for advice

[GreenSock 18,874 Likes (Superhero)]

Are you running that in the browser? If so, browsers require that you declare type="module" in the script tag, and I think you also need to use a relative path to the module files, like you could start with "./" assuming it's in the same folder: 

<script type="module">
  import gsap from './gsap.js';
  import { ScrollTrigger } from './gsap/ScrollTrigger.js';
...
</script>

This has nothing to do with GSAP - it's just how all browsers work with any JavaScript module.

 

It's pretty uncommon to load the uncompressed ES Module files like that in the browser, though. Typically you'd want to just load the minified UMD files and then you don't need imports at all, you get universal compatibility, and faster load times. Just load the files that end in ".min.js" (in the minified folder of the download zip, or just link to the CDN files). https://greensock.com/install 

[pguardiario 0 Likes (Newbie)]

9 minutes ago, GreenSock said:

Thanks for the reply but this causes a bunch of different errors.

If I use the CDN version, I'll also get errors because those things won't be defined (gsap / ScrollTrigger)

I think I might need to wait for a Svelte user to weigh in on this, but can you confirm that this is the right way to import ScrollTrigger in Reavt/Vue  ?

 

[GreenSock 18,874 Likes (Superhero)]

Yes, the original way you had it is the typical way to import GSAP and ScrollTrigger in a React project (or anything that is Node-based). EXCEPT that it's not in a <script> tag like that. Usually React projects have a build tool driving everything, so you just write normal import statements and the build tool handles compiling all that down into a JS file that gets injected via a <script> tag, often compiled into non-module code (ES5) for compatibility. None of that has anything to do with GSAP. 

 

Here's a starter template: https://codesandbox.io/s/gsap-svelte-starter-cbvtv

 

If you're still having trouble, please fork that template and recreate the issue so we can see it in context. 

[pguardiario 0 Likes (Newbie)]

Thanks for that, the codesandbox code works but it breaks as soon as I add ScrollTrigger.

It works in codesandbox and breaks locally.

I think I'm going to give up on Svelte.

[GreenSock 18,874 Likes (Superhero)]

Did you register the plugin? Seems to work fine:

 

https://codesandbox.io/s/wonderful-panini-49uzep?file=/App.svelte

 

Am I missing something?

[pguardiario 0 Likes (Newbie)]

20 minutes ago, GreenSock said:

Yeah, it works in codesandbox but I get that error locally.

I'm giving up on Svelte if you want to close this one.

 

[GreenSock 18,874 Likes (Superhero)]

Maybe this would help? 🤷‍♂️

https://svelte-recipes.netlify.app/build-setup/

 

Did you try importing from the /dist/ directory? Maybe that'd work if you're not transpiling. 

import gsap from "gsap/dist/gsap";
import ScrollTrigger from "gsap/dist/ScrollTrigger";

And make sure you gsap.registerPlugin(ScrollTrigger); 

[Born05 6 Likes (Newbie)]

On 7/1/2022 at 4:29 AM, GreenSock said:

Maybe this would help? 🤷‍♂️

https://svelte-recipes.netlify.app/build-setup/

 

Did you try importing from the /dist/ directory? Maybe that'd work if you're not transpiling. 

import gsap from "gsap/dist/gsap";
import ScrollTrigger from "gsap/dist/ScrollTrigger";

And make sure you gsap.registerPlugin(ScrollTrigger); 

When building using SvelteKit's static adapter in combination with typescript this throws the following error:

Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/usr/src/app/node_modules/gsap/dist/ScrollTrigger' imported from /usr/src/app/.svelte-kit/output/server/entries/pages/__layout.svelte.js
Did you mean to import gsap/dist/ScrollTrigger.js?

The gsap import using 

import gsap from 'gsap';

seems to work fine.

Importing the .js file directly conflicts with typescript:

Could not find a declaration file for module 'gsap/dist/ScrollTrigger.js'. '/Users/roelvanhintum/Sites/ace-placeholder/app/node_modules/gsap/dist/ScrollTrigger.js' implicitly has an 'any' type.
  If the 'gsap' package actually exposes this module, try adding a new declaration (.d.ts) file containing `declare module 'gsap/dist/ScrollTrigger.js';`ts(7016)

 

[GreenSock 18,874 Likes (Superhero)]

5 hours ago, Born05 said:

When building using SvelteKit's static adapter in combination with typescript this throws the following error:

Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/usr/src/app/node_modules/gsap/dist/ScrollTrigger' imported from /usr/src/app/.svelte-kit/output/server/entries/pages/__layout.svelte.js
Did you mean to import gsap/dist/ScrollTrigger.js?

 

Ah, it sounds like your build system is looking for ES Modules, so there's no need to use the /dist/ directory in that case. 

[Born05 6 Likes (Newbie)]

Importing gsap/ScrollTrigger.js throws the folliwing error:

Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
app_1      | (Use `node --trace-warnings ...` to show where the warning was created)
app_1      | Cannot use import statement outside a module
app_1      | /usr/src/app/node_modules/gsap/ScrollTrigger.js:12
app_1      | import { Observer, _getTarget, _vertical, _horizontal, _scrollers, _proxies, _getScrollFunc, _getProxyProp, _getVelocityProp } from "./Observer.js";
app_1      | ^^^^^^
app_1      | 
app_1      | SyntaxError: Cannot use import statement outside a module
app_1      |     at Object.compileFunction (node:vm:353:18)
app_1      |     at wrapSafe (node:internal/modules/cjs/loader:1040:15)
app_1      |     at Module._compile (node:internal/modules/cjs/loader:1076:27)
app_1      |     at Module._extensions..js (node:internal/modules/cjs/loader:1166:10)
app_1      |     at Module.load (node:internal/modules/cjs/loader:988:32)
app_1      |     at Module._load (node:internal/modules/cjs/loader:834:12)
app_1      |     at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:170:29)
app_1      |     at ModuleJob.run (node:internal/modules/esm/module_job:198:25)
app_1      |     at async Promise.all (index 0)
app_1      |     at async ESMLoader.import (node:internal/modules/esm/loader:409:24)

Importing gsap/ScrollTrigger results in the following:

Cannot use import statement outside a module
app_1      | /usr/src/app/node_modules/gsap/ScrollTrigger.js:12
app_1      | import { Observer, _getTarget, _vertical, _horizontal, _scrollers, _proxies, _getScrollFunc, _getProxyProp, _getVelocityProp } from "./Observer.js";
app_1      | ^^^^^^
app_1      | 
app_1      | SyntaxError: Cannot use import statement outside a module
app_1      |     at Object.compileFunction (node:vm:353:18)
app_1      |     at wrapSafe (node:internal/modules/cjs/loader:1040:15)
app_1      |     at Module._compile (node:internal/modules/cjs/loader:1076:27)
app_1      |     at Module._extensions..js (node:internal/modules/cjs/loader:1166:10)
app_1      |     at Module.load (node:internal/modules/cjs/loader:988:32)
app_1      |     at Module._load (node:internal/modules/cjs/loader:834:12)
app_1      |     at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:170:29)
app_1      |     at ModuleJob.run (node:internal/modules/esm/module_job:198:25)
app_1      |     at async Promise.all (index 0)
app_1      |     at async ESMLoader.import (node:internal/modules/esm/loader:409:24)

 

[Born05 6 Likes (Newbie)]

Solution turns out to be:

import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/dist/ScrollTrigger.js';

Works in latest version of SvelteKit/vite.

[misha1711 0 Likes (Newbie)]

On 6/30/2022 at 12:12 AM, pguardiario said:

import { ScrollTrigger } from 'gsap/ScrollTrigger';

 

[zadamg 0 Likes (Newbie)]

I'm also having problems with this in my sveltekit appliation.  It was working just fine without /dist/ or whatever.  I had a need to delete my node_modules folder for another reason.. I went to reinstall gsap and followed the same instructions I had a few weeks ago when I bought it... now i'm getting this:

 

(node:59380) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
4:41:43 PM [vite] Error when evaluating SSR module /src/lib/components/Hero.svelte: failed to import "gsap/ScrollTrigger"
|- C:\Users\ryzen\Documents\WoNdErLaNd\Personal\creative-briefer\peachy_brief\node_modules\gsap\ScrollTrigger.js:12
import { Observer, _getTarget, _vertical, _horizontal, _scrollers, _proxies, _getScrollFunc, _getProxyProp, _getVelocityProp } from "./Observer.js";
^^^^^^

SyntaxError: Cannot use import statement outside a module
 

4:41:43 PM [vite] Error when evaluating SSR module /src/routes/+page.svelte: failed to import "/src/lib/components/Hero.svelte"
|- C:\Users\ryzen\Documents\WoNdErLaNd\Personal\creative-briefer\peachy_brief\node_modules\gsap\ScrollTrigger.js:12
import { Observer, _getTarget, _vertical, _horizontal, _scrollers, _proxies, _getScrollFunc, _getProxyProp, _getVelocityProp } from "./Observer.js";
^^^^^^

SyntaxError: Cannot use import statement outside a module


C:\Users\ryzen\Documents\WoNdErLaNd\Personal\creative-briefer\peachy_brief\node_modules\gsap\ScrollTrigger.js:12
import { Observer, _getTarget, _vertical, _horizontal, _scrollers, _proxies, _getScrollFunc, _getProxyProp, _getVelocityProp } from "./Observer.js";
^^^^^^

..............

Again, what the OP asked about and what I'm asking about aren't for us to "fix" with "module" because that's just not something you do or handle in svelte....  and it shouldn't be necessary.  It wasn't necessary for me just a few hours ago until I broke it somehow.

So, the question is.. what the heck happened and why can I not just reinstall the gsap-bonus tar like I did last time?  Sigh  It was working so well, too.


 

[Rodrigo 5,879 Likes (Superhero)]

Hi @zadamg,

 

Sorry about the inconveniences 😞

 

I just checked in Svelte's discord channel and I'll await an official word from them regarding this issue. It seems that the issue happens when you import any GSAP plugin in a SvelteKit app.

 

I just created a new app using:

npm create svelte@latest my-app

Then I added the custom GSAP stuff to the .npmrc file (the first two lines are added by SvelteKit):

engine-strict=true
resolution-mode=highest
registry=https://npm.greensock.com
@gsap:registry=https://npm.greensock.com
//npm.greensock.com/:_authToken=<your-token-here>

And then in my home page I added this:

import { onMount } from 'svelte';
import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/dist/ScrollTrigger';

import '../styles.css';

if (typeof window !== 'undefined') {
  gsap.registerPlugin(ScrollTrigger);
}

onMount(() => {
  const ctx = gsap.context(() => {
    ScrollTrigger.create({
      trigger: '.content',
      start: 'top top',
      end: '+=100%',
      pin: true,
      markers: true
    });
  });

  return () => ctx.revert();
});

And everything is working as expected in development and the build preview as well.

If possible create a minimal demo using the SvelteKit template installing the GSAP Trial package if you want to add some bonus elements, but using the regular GSAP package should be enough:

https://stackblitz.com/?starters=fullstack

 

Hopefully this helps.

Happy Tweening!