Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

[SSR] setTimeout is not supported in server-rendered Javascript

Recommended Posts

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

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

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

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

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

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

The problem is that setTimeout is called from within the GSAP imported code. The stack trace i've posted above, points to this line:



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

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

  • 9 months later...

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

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

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.