Sveltekit with gsap and scrollTrigger

[Jncocontrol 2 Likes (Newbie)]

Hi everyone, i've been trying to implement scrollTrigger and gsap into my most recent project. However, I keep getting this error

 

Quote

C:\Users\Bradley\Desktop\新建文件夹\node_modules\gsap\ScrollTrigger.js:758
export var ScrollTrigger = /*#__PURE__*/function () {
^^^^^^

SyntaxError: Unexpected token 'export'
    at Object.compileFunction (node:vm:353:18)
    at wrapSafe (node:internal/modules/cjs/loader:1039:15)
    at Module._compile (node:internal/modules/cjs/loader:1073:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1138:10)
    at Module.load (node:internal/modules/cjs/loader:989:32)
    at Function.Module._load (node:internal/modules/cjs/loader:829:14)
    at Module.require (node:internal/modules/cjs/loader:1013:19)
    at require (node:internal/modules/cjs/helpers:93:18)
    at nodeRequire (C:\Users\Bradley\Desktop\新建文件夹\node_modules\vite\dist\node\chunks\dep-c1a9de64.js:73479:17)
    at ssrImport (C:\Users\Bradley\Desktop\新建文件夹\node_modules\vite\dist\node\chunks\dep-c1a9de64.js:73431:20)

I have it all imported

 

Quote

import {gsap}  from "gsap";        
import {ScrollTrigger} from "gsap/ScrollTrigger";    

 

 

gsap.registerPlugin(ScrollTrigger)       

 

gsap.to("main",{    

scrollTrigger: {        

trigger: 'main',        

start: '20px 80%',        

markers: true    

},    

x: 400,    

rotation: 360,    

duration: 3
})

But still won't work. Any help would be apprecaited.

[GreenSock 18,878 Likes (Superhero)]

You must be using the ES Module files in an environment that doesn't understand ES Modules. 

 

Try importing the UMD files instead by adding /dist/ to the paths like:

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

Or you could simply use a <script> tag and pull in the *.min.js minified ES5 files. 

[Jncocontrol 2 Likes (Newbie)]

4 hours ago, GreenSock said:

You must be using the ES Module files in an environment that doesn't understand ES Modules. 

 

Try importing the UMD files instead by adding /dist/ to the paths like:

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

Or you could simply use a <script> tag and pull in the *.min.js minified ES5 files. 

That worked, thanks .I swore I did that before I came here and posted this thread. But, nonetheless I appreciate the help.

[csellis 2 Likes (Newbie)]

This works locally but is failing on build for me on Netlify. I'm getting the following error:

6:18:51 AM: Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/opt/build/repo/node_modules/gsap/dist/gsap' imported from /opt/build/repo/.svelte-kit/output/server/entries/pages/new.svelte.js

6:18:51 AM: Did you mean to import gsap/dist/gsap.js?

6:18:51 AM: at new NodeError (node:internal/errors:371:5)

6:18:51 AM: at finalizeResolution (node:internal/modules/esm/resolve:394:11)

6:18:51 AM: at moduleResolve (node:internal/modules/esm/resolve:944:10)

6:18:51 AM: at defaultResolve (node:internal/modules/esm/resolve:1041:11)

6:18:51 AM: at ESMLoader.resolve (node:internal/modules/esm/loader:530:30)

6:18:51 AM: at ESMLoader.getModuleJob (node:internal/modules/esm/loader:251:18)

6:18:51 AM: at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:79:40)

6:18:51 AM: at link (node:internal/modules/esm/module_job:78:36)

6:18:52 AM: Creating deploy upload records

6:18:51 AM: > 500 /new

6:18:51 AM: at file:///opt/build/repo/node_modules/@sveltejs/kit/dist/chunks/index2.js:983:11

6:18:51 AM: at save (file:///opt/build/repo/node_modules/@sveltejs/kit/dist/chunks/index2.js:1203:4)

6:18:51 AM: at visit (file:///opt/build/repo/node_modules/@sveltejs/kit/dist/chunks/index2.js:1094:3)

6:18:51 AM: at processTicksAndRejections (node:internal/process/task_queues:96:5)

6:18:52 AM: 

6:18:52 AM: Failed during stage 'building site': Build script returned non-zero exit code: 2 (https://ntl.fyi/exit-code-2)

 

[csellis 2 Likes (Newbie)]

Until this gets sorted by Vite or Netlify, my work around is a `LoadScript.svelte` component:

<script>
  import { onMount } from 'svelte';

  export let src;
  export let callback = () => {};
  let mounted = false;
  export let externalJSReady = false;

  if (!src) {
    console.warn('No src provided for the script tag');
  }

  if (!callback) {
    console.warn('No callback provided for the script tag');
  }

  onMount(() => {
    // The page is ready.
    mounted = true;
    if (externalJSReady) {
      callback();
    }
  });

  function jsLoaded() {
    console.log(`js ready!`);
    // The external javascript is ready.
    externalJSReady = true;
    if (mounted) {
      callback();
    }
  }
</script>

<svelte:head>
  <script {src} on:load={jsLoaded}>
  </script>
</svelte:head>

Then you use it like this:

<LoadScript
  src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"
  bind:externalJSReady={gsapReady}
/>
<LoadScript
  src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/ScrollTrigger.min.js"
  bind:externalJSReady={scrollTriggerReady}
/>

I added the externalJSReady and callback in case I need them, but it seems to work without.

[chimp1nski 13 Likes (Newbie)]

Hey @csellis

I had some minor issues with Netlify too.
The solution for your problem is provided in the logs on the second line.
 

6:18:51 AM: Did you mean to import gsap/dist/gsap.js?

The funny part is you literally need to provide ".js" in the import.

For me this works fine. Deployed on Netlify:

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

It's really odd and definitely counter-intuitive.
Don't think it's a Netlify / Vite issue though. I used a lot of different tech and gsap is the only library where this was an issue.

I think somewhere in the forums is a post about import and export and from what I've read they are thinking about maybe rethinking the exports.
BUT it's definitely not gonna be implemented before next major release (4.0) since it most certainly introduce breaking changes.

Anyways hope this helps.

[csellis 2 Likes (Newbie)]

Very weird @chimp1nski. I don't want to refactor it now, but we're about to add it to another project so hopefully it won't be an issue in that one.

Thanks for letting me know

[OSUblake 18,534 Likes (Superhero)]

On 4/26/2022 at 8:16 AM, chimp1nski said:

Don't think it's a Netlify / Vite issue though.

 

It's definitely an issue related to SvelteKit or Vite as this does not happen with other build tools. 

 

 

 

[OSUblake 18,534 Likes (Superhero)]

@chimp1nski are you using SvelteKit or Vite and something else? I saw you made a post in a thread related React, so I'm trying to narrow down the issue to SvelteKit or Vite.

 

 

[chimp1nski 13 Likes (Newbie)]

@OSUblake 
<offtopic>
I started a project with SvelteKit but now switched back to React and Next.js since SvelteKit is just too much of a beta still.
I love Svelte and SvelteKit and it's frustrating that I am not able to use it in production yet.
</offtopic>

Anyways,
Now that I started adding gsap to the Next.js / React project, I can confirm, that the .js file extension is not needed there.
So yes, It seems like this is actually a SvelteKit / Vite issue.
 

I think it's kind of the wrong place to discuss it but i'd love to be able to import like this:

import gsap, { ScrollTrigger, ScrollSmoother } from "gsap";

But honestly it really doesn't matter and the docs actually do a great job explaining how to import correctly.

[OSUblake 18,534 Likes (Superhero)]

7 hours ago, chimp1nski said:

I think it's kind of the wrong place to discuss it but i'd love to be able to import like this:

import gsap, { ScrollTrigger, ScrollSmoother } from "gsap";

 

Actually you can. 😉

 

import { gsap, ScrollTrigger, ScrollSmoother } from "gsap/all";

 

The reason it's not like that as the default is because when version 3 of GSAP came out, tree-shaking wasn't that common of a practice, so people would end up with huge bundles. 

 

[csellis 2 Likes (Newbie)]

I can confirm it is working on Netlify using this method
 

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

...
</script>

 

[chimp1nski 13 Likes (Newbie)]

On 4/29/2022 at 7:40 PM, OSUblake said:

 

Actually you can. 😉

 

import { gsap, ScrollTrigger, ScrollSmoother } from "gsap/all";

 

The reason it's not like that as the default is because when version 3 of GSAP came out, tree-shaking wasn't that common of a practice, so people would end up with huge bundles. 

 

Hey, @OSUblake I didn't mention that I already tried importing from "gsap/all" because I read it in a different post.
Unfortunately Next throws an Error
 

Server Error
SyntaxError: Cannot use import statement outside a module

So my guess is that `/all` doesn't export esm (?)
From what I can tell theres no "gsap/dist/all"?

For me it's totally fine to just import each module on it's own.

[OSUblake 18,534 Likes (Superhero)]

Oh, right. I forgot about there not being a gsap/all for dist. 

 

Transpiling modules is still an experimental feature in next.js. There is a package to transpile ES Modules, which in theory should allow you to use gsap/all, but I've honestly never tried it so I can't say with 100% certainty that it will work.

 

https://github.com/martpie/next-transpile-modules

 

[AdamsCode 0 Likes (Newbie)]

@OSUblake Any further updates on this? I'm expierencing the same issue, the only way I can import it now is by using the below method. 

 

The problem is this is causing serious headaches while trying to cleanup ScrollTriggers. 

 

 

    onMount(() => {

        const { ScrollTrigger } = await import('gsap/ScrollTrigger');

        gsap.registerPlugin(ScrollTrigger);

    });

 

 

[OSUblake 18,534 Likes (Superhero)]

5 minutes ago, AdamsCode said:

Any further updates on this? I'm expierencing the same issue, the only way I can import it now is by using the below method. 

 

We're still looking into this, but have you tried the method I used in the zipped project here?

 

 

If that doesn't work, I would probably just do regular <script> tags as you'll never have issues with a bundler and ScrollTrigger will be global in all your files.

 

[Vinciola 0 Likes (Newbie)]

On 5/2/2022 at 8:12 PM, OSUblake said:

 

We're still looking into this, but have you tried the method I used in the zipped project here?

 

 

If that doesn't work, I would probably just do regular <script> tags as you'll never have issues with a bundler and ScrollTrigger will be global in all your files.

 

Hi @OSUblake

 

Please how do i use the <script> tags in sveltekit

[GSAP Helper 122 Likes (Specialist)]

Of course anyone is welcome to answer, but I just wanted to point out that we really try to keep these forums focused on GSAP-specific questions (see the forum guidelines). That sounds like a sveltekit question for sure. I have zero experience with sveltekit. Have you tried asking that community? 

[vsimak 10 Likes (Newbie)]

On 8/15/2022 at 2:31 AM, Vinciola said:

Hi @OSUblake

 

Please how do i use the <script> tags in sveltekit

 

@Vinciola for all Svelte specific questions you should definitely check their amazing docs they have tutorials step by step, they are very easy to get.
Here is a pure doc for <script> tags (which you can put on top - or anywhere really - of every .svelte file for any JS stuff to write there): https://svelte.dev/docs#component-format-script