Cannot use the intersection Obeserver Api in the remix app

[alihussain575]

What is the location of your example repository?

No response

Which package or tool is having this issue?

Hydrogen

What version of that package or tool are you using?

4.0.4

What version of Remix are you using?

1.19.1

Steps to Reproduce

I have used many packages like react-intersection-observer and @shopify/react-intersection-observer but it does not obeserve the element

I have also created a component that still would not work

import React, {useEffect, useRef, useState} from 'react';

function InView(props) {
  const ref = useRef();
  const observerRef = useRef(null);
  const [isInView, setIsInView] = useState(false);

  const handleIntersection = (entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        setIsInView(true);
        observerRef.current.unobserve(entry.target);
      }
    });
  };

  useEffect(() => {
    if (typeof window !== 'undefined') {
      // Check if running on the client
      observerRef.current = new IntersectionObserver(handleIntersection, {
        threshold: 0.5,
      });

      // Start observing the element when it's available on the client side
      if (ref.current) {
        observerRef.current.observe(ref.current);
      }

      return () => {
        if (observerRef.current) {
          observerRef.current.disconnect();
        }
      };
    }
  }, []);

  return (
    <div ref={(node) => (ref.current = node)}>
      {props.children({
        isInView,
      })}
    </div>
  );
}

export default InView;

Expected Behavior

Should observe the element that I want to observe

Actual Behavior

Does not Observe the element

[wizardlyhel]

We use the same react-intersection-observer package in our own demo-store example and it works.

https://github.com/Shopify/hydrogen/blob/main/templates/demo-store/app/routes/(%24locale).collections.%24collectionHandle.tsx#L4

[blittle]

Closing for lack of response. Please re-open if still a problem.