Jump to content
Search Community

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

AndreWAY test
Moderator Tag

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:

 

gsap-import.thumb.png.16f9006cf018c39352dcbbf6d33d15f0.png

 

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.

 

ssr-gsap.thumb.png.3731b9a1b7f98ed34c990f45f8826e93.png

 

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

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:

gsap-install-ssr.thumb.png.e033542be3de90dcf21354600de70b50.png

 

That's why the hasWindow check is implemented. Which looks like this:

haswindow.png.dd6b5822020d1bb41dd00ffd9c5c1ed2.png

 

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

  • 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

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