Netlify build fails with ScrollToPlugin

[ViVO Digital]

Hi,

 

We're encountering build errors after adding ScrollToPlugin to a project deployed on Netlify:

Could not load edge function at '/opt/build/repo/.netlify/edge-functions/handler/index.js'
ReferenceError: document is not defined

ScrollToPlugin is imported as follows:

import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/dist/ScrollTrigger';
import { ScrollToPlugin } from 'gsap/dist/ScrollToPlugin';

gsap.registerPlugin(ScrollTrigger, ScrollToPlugin);

ScrollToPlugin works as expected during local development. Furthermore, ScrollTrigger and SplitText are used elsewhere in the project and build without issue. I'm hoping somebody's able to point us in the right direction.

 

Thanks in advance.

[GreenSock]

Hm, that's very odd. Never heard of that before. My guess is that "document" is not defined yet when you are registering the plugin (like SSR?). Can you move that gsap.registerPlugin() call to a place in your code where you know for sure that the document exists? 

[ViVO Digital]

On 11/22/2022 at 3:32 PM, GreenSock said:

My guess is that "document" is not defined yet when you are registering the plugin (like SSR?). Can you move that gsap.registerPlugin() call to a place in your code where you know for sure that the document exists? 

 

Thanks for stepping in to help out once again, Jack (you helped me before we created our org account)! We'll look into this asap and post the outcome here.

 

Chris

[ViVO Digital]

Thanks Jack, the component we are using is in a client component but at the root level it gets called in from a server component. Shopify Hydrogen to be specific, it has a `isBrowser` flag similiar to the `process.client` example shown in the GSAP docs. I have wrapped the `registerPlugin` inside `isBrowser` but still no dice. 

[GreenSock]

Did you verify that the document exists in that spot? Like: 

if (isBrowser) {
  console.log("document:", document); // undefined?
  ...
}

 

[ViVO Digital]

Got it thanks. Yes, `document` was indeed undefined here (on first render) as you originally suggested so I moved the `gsap.registerPlugin(ScrollTrigger);` into a useLayoutEffect where we know the document exists. Thank you for help and quick responses.