Strange error on refresh SvelteKit (only in production)

[Denev]

Hi there,

 

I am having a very bizzare issue. I am almost done with a project on SvelteKit, which uses GSAP for animations. Everything was going perfectly well, untill I built the production version. After deployment everything seemed to work fine - all pages load and the appropriate animations are there. However, when you try to reload a page (other than the home page), the following error occurs.

 

Uncaught (in promise) TypeError: (intermediate value).gsap is undefined
    Immutable 19

 

Because of the fact that the problem occurs only in production (only when I run the npm run build), and it is perfect when I run npm run dev, I was not sure how to show you this instance with a CodePen.

 

So here is a simplified version of the  http://stagger.fragment.bg. And here is the link to the GitHub repo https://github.com/kodes-agency/fragment-test.

 

Here is a video that ilustrates the issue: http://api.fragment.bg/uploads/Issue_0_21_798db83bc7.mov

 

I am really clueless why this happens. I will appreciate every input into how to solve this issue.

[Denev]

Solved! For whoever experiences the same issue, here is the deal. In production you get an error if you register the same plugin in different pages. So what I did is - I imported all the necessary plugins and registered them in the main layout component, so there is no duplication. This solved the issue for me.

[Rodrigo]

Hi @Denev,

 

Thanks for reporting back and for sharing the solution to your issue with the community 🥳

 

Happy Tweening!

[GreenSock]

3 hours ago, Denev said:

In production you get an error if you register the same plugin in different pages.

That sounds very odd to me - GSAP doesn't care if you register the same plugin a bunch of times. Can you provide a minimal demo (like a Stackblitz) that illustrates the issue? Here's one where I registered ScrollTrigger a bunch of times and it seems to work fine, but I'm sure I must be missing something: 

https://stackblitz.com/edit/sveltejs-kit-template-default-eddyvv?file=src%2Froutes%2F%2Bpage.svelte

[Denev]

t

[Denev]

51 minutes ago, GreenSock said:

That sounds very odd to me - GSAP doesn't care if you register the same plugin a bunch of times. Can you provide a minimal demo (like a Stackblitz) that illustrates the issue? Here's one where I registered ScrollTrigger a bunch of times and it seems to work fine, but I'm sure I must be missing something: 

https://stackblitz.com/edit/sveltejs-kit-template-default-eddyvv?file=src%2Froutes%2F%2Bpage.svelte

 

I can see that you have registered the the plugins multiple times in the same page. The problem arises when you register the same plugins in diferent routes of the same app. The strange thing is that the problem is only there when you build the app. In dev mode everything works fine.

 

Here is a slightly tweaked version so you can check the issue. Dont forget to test it not in dev but in prevew (npm run build - npm run preview).

After you navigate to the about page and you refresh it, you will see that the error occurs.

https://stackblitz.com/edit/sveltejs-kit-template-default-mp1jyy?file=package-lock.json

 

 

Here is also a video of the issue:

http://api.fragment.bg/uploads/Screen_Recording_2023_04_25_at_23_17_48_34045ba8b1.mov

 

I assume it has something to do with the bundling process of Vite.

[GreenSock]

@Denev I poked around a bit and it looks like something in the build tool is incorrectly resolving the ScrollTrigger import: 

 

// undefined (only in build/preview):
import { ScrollTrigger } from "gsap/dist/ScrollTrigger";

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

🤷‍♂️

 

So if you change your import accordingly (like above), it all seems to work properly.

[Denev]

Appologise for the late reply.

 

Thank you for looking into it. I really appreciate the effort and the swift problem solving!

[grizhlie]

I appreciate this information. As someone who loves GSAP and SvelteKit I am sure that I would have run into this sooner or later.

 

I'll carry on scrolling, thanks again