Denev Posted April 25, 2023 Share Posted April 25, 2023 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. Link to comment Share on other sites More sharing options...
Solution Denev Posted April 25, 2023 Author Solution Share Posted April 25, 2023 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. 1 Link to comment Share on other sites More sharing options...
Rodrigo Posted April 25, 2023 Share Posted April 25, 2023 Hi @Denev, Thanks for reporting back and for sharing the solution to your issue with the community 🥳 Happy Tweening! Link to comment Share on other sites More sharing options...
GreenSock Posted April 25, 2023 Share Posted April 25, 2023 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 Link to comment Share on other sites More sharing options...
Denev Posted April 25, 2023 Author Share Posted April 25, 2023 t Link to comment Share on other sites More sharing options...
Denev Posted April 25, 2023 Author Share Posted April 25, 2023 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. Link to comment Share on other sites More sharing options...
GreenSock Posted May 8, 2023 Share Posted May 8, 2023 @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. 3 Link to comment Share on other sites More sharing options...
Denev Posted May 19, 2023 Author Share Posted May 19, 2023 Appologise for the late reply. Thank you for looking into it. I really appreciate the effort and the swift problem solving! Link to comment Share on other sites More sharing options...
grizhlie Posted May 19, 2023 Share Posted May 19, 2023 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 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now