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,237 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,237 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,237 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,237 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 5 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,237 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 5 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 5 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';