GSAP not working with Hydrogen2 & Oxygen

[joevingracien]

Hello everyone,
I did a simple test to get GSAP working with Hydrogen2 but it doesn't seem to.
The exact same code runs perfectly on Remix. (Both Hydrogen and Remix on version 1.12)

Code:

import gsap from 'gsap';
import {useLayoutEffect, useRef, useEffect} from 'react';

export const meta = () => {
  return {
    title: 'Hydrogen',
    description: 'A custom storefront powered by Hydrogen',
  };
};
export default function IndexPage() {
  const root = useRef();
  const useIsomorphicLayoutEffect =
    typeof window !== 'undefined' ? useLayoutEffect : useEffect;

  useIsomorphicLayoutEffect(() => {
    const ctx = gsap.context(() => {
      // all your animations go in here...
      gsap.to('.box', {rotation: '+=360'});
    }, root); // <- scopes all selector text to the root element

    return () => ctx.revert();
  }, []);
  return (
    <>
      <div ref={root} className="app">
        <div className="box">Hello</div>
      </div>
    </>
  );
}

Error message:

/Users/joevingracien/Documents/GitHub/Hydrogen/Deadground/node_modules/yoga-layout-prebuilt/yoga-layout/build/Release/nbind.js:53
throw ex;
^

Error: Some functionality, such as asynchronous I/O (fetch, Cache API, KV), timeouts (setTimeout, setInterval), and generating random values (crypto.getRandomValues, crypto.subtle.generateKey), can only be performed while handling a request.
at assertInRequest (/Users/joevingracien/Documents/GitHub/Hydrogen/Deadground/node_modules/@miniflare/shared/src/context.ts:51:11)
at /Users/joevingracien/Documents/GitHub/Hydrogen/Deadground/node_modules/@miniflare/core/src/standards/timers.ts:15:28
at _req (/Users/joevingracien/Documents/GitHub/Hydrogen/Deadground/node_modules/gsap/gsap-core.js:1339:18)
at _tick2 (/Users/joevingracien/Documents/GitHub/Hydrogen/Deadground/node_modules/gsap/gsap-core.js:1304:22)
at Object.wake (/Users/joevingracien/Documents/GitHub/Hydrogen/Deadground/node_modules/gsap/gsap-core.js:1344:9)
at _wake (/Users/joevingracien/Documents/GitHub/Hydrogen/Deadground/node_modules/gsap/gsap-core.js:1384:36)
at _createPlugin (/Users/joevingracien/Documents/GitHub/Hydrogen/Deadground/node_modules/gsap/gsap-core.js:1027:3)
at /Users/joevingracien/Documents/GitHub/Hydrogen/Deadground/node_modules/gsap/gsap-core.js:4089:14
at Array.forEach ()
at Object.registerPlugin (/Users/joevingracien/Documents/GitHub/Hydrogen/Deadground/node_modules/gsap/gsap-core.js:4088:10)

Does anyone have any idea what's going on here or may have a suggestion / solution please ?

[frandiox]

It looks like this is an issue in GSAP itself.

When you use the Hydrogen CLI, it runs your app in a worker environment (Oxygen) instead of Node.js. Workers don't allow calling setTimeout outside of request cycles (i.e. the fetch export). However, GSAP calls setTimeout at import time and it breaks the worker.

Edit: See the comments below for a workaround.

[frehner]

That seems good as well - useEffect and useLayoutEffect only run on client-side, so by calling loadGsap() in there, you've made it not execute on the server. 👍

[juanpprieto]

Code does look good 😅. Will keep this as ref for future examples. Thanks for sharing @joevingracien

[frandiox]

Yeah, that's even better, thanks for sharing it @joevingracien !

[joevingracien]

Glad if it can help a little. Thank you all for your help again !

[juanpprieto]

Created an unofficial example based on this discussion 🙏🏼