Jump to content
Search Community

Sveltekit with gsap and scrollTrigger

Jncocontrol test
Moderator Tag

Recommended Posts

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.

Link to comment
Share on other sites

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. 

  • Thanks 1
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

  • 8 months later...

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)

 

Link to comment
Share on other sites

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.

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

@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.

Link to comment
Share on other sites

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. 

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

 

  • Like 1
Link to comment
Share on other sites

@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);
    });
 
 
Link to comment
Share on other sites

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.

 

Link to comment
Share on other sites

  • 3 months later...
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

Link to comment
Share on other sites

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

  • Like 2
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...