AndreWAY Posted November 3, 2020 Share Posted November 3, 2020 I'm trying to upgrade a GSAP v2 integration in a large codebase to GSAP v3. Instead of one global import for GSAP + plugins, I've created feature imports like in the installation examples from the documentation: This is working fine in a (local) Webpack dev-server environment. However when i'm generating Webpack SSR production builds it seems like non compatible SSR code is leaking from the imported GSAP modules. Even with the client/server check when registering plugins. I'm running this generated SSR bundle on a IIS environment with a V8 engine for processing the SSR javascript. Has anyone encountered the same behaviour? If so, any help is much appreciated! Link to comment Share on other sites More sharing options...
ZachSaucier Posted November 3, 2020 Share Posted November 3, 2020 Hey AndreWAY. All of your GSAP-related code should run on the client side, not just registering the plugins you're using. Maybe this thread can help: Link to comment Share on other sites More sharing options...
AndreWAY Posted November 3, 2020 Author Share Posted November 3, 2020 The problem is that the GSAP code works fine in the front-end (client). But when it's imported in a separate SSR bundle there seems no window check in the registerPlugin function which throws a setTimeout error. Link to comment Share on other sites More sharing options...
ZachSaucier Posted November 3, 2020 Share Posted November 3, 2020 People often use GSAP in SSR projects. Please read the thread I linked to above to see if you can learn anything from it. Are you saying that you can make a SSR production build with only the code that you show in the screenshot above and it gives you that same error? If so it seems like it's an issue with the hasWindow library that you're using because it's obviously not running on the client side. Link to comment Share on other sites More sharing options...
AndreWAY Posted November 4, 2020 Author Share Posted November 4, 2020 Yeah, i've tried a lot of solutions posted by other people. The solution provided in the link above only works if you want to load GSAP via CDN. For this project we are using loadable components (https://loadable-components.com/). So basically we only want to load GSAP for components that are using it. The example code provided on the installation page works in every component. Then, for SSR you need to check if the code is running on the client or server: That's why the hasWindow check is implemented. Which looks like this: So the gsap.registerPlugin function should not be called when running on the server? But it is, so am I missing something here? Link to comment Share on other sites More sharing options...
OSUblake Posted November 4, 2020 Share Posted November 4, 2020 Something doesn't sound right, but why don't you do a check for setTimeout in your hasWindow function? Link to comment Share on other sites More sharing options...
AndreWAY Posted November 5, 2020 Author Share Posted November 5, 2020 The problem is that setTimeout is called from within the GSAP imported code. The stack trace i've posted above, points to this line: https://github.com/greensock/GSAP/blob/master/dist/gsap.js#L1204 So i guess it's not possible at all to make this work in SSR. Unless you load all the GSAP stuff outside the bundles generated by Webpack. Link to comment Share on other sites More sharing options...
GreenSock Posted November 5, 2020 Share Posted November 5, 2020 Sure, I know there are plenty of people using GSAP in SSR environments, though I'm not personally familiar with those. The line of code you referenced would only be executed if there's no window.requestAnimationFrame defined, so perhaps you should check for that instead. Link to comment Share on other sites More sharing options...
Tayyab Posted August 23, 2021 Share Posted August 23, 2021 Hi @AndreWAY, were you able to solve the issue? I am having same problem. It works fine when frontend is running on its own but gives the timeout error when the same build is served via dotnet based CMS. I have tried import/require/dist etc.. Please share your findings. Thanks Link to comment Share on other sites More sharing options...
Cassie Posted August 23, 2021 Share Posted August 23, 2021 Hi Tayyab - please don't @ people into old threads they weren't a part of. Did you read this thread? 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