Jump to content
Search Community

Problems importing ScrollTrigger

pguardiario test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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 

Link to comment
Share on other sites

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  ?

 

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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)

 

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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)

 

Link to comment
Share on other sites

  • 7 months later...
  • 2 months later...

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.


 

Link to comment
Share on other sites

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!

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...