useGSAP not registering `useRef`

[gabriel.ortiz]

I'm just starting out with React and `useGSAP` and I'm running into an issue with out what appears to be the hook registering:

 

react.development.js:1630 Uncaught TypeError: Cannot read properties of null (reading 'useRef')
    at useRef (react.development.js:1630:1)
    at useGSAP (index.js:32:1)

However, despite this error - I can console.log the `useGSAP` hook, and also the `gsap` package and both are successfully loaded. This error message happens when I try to use useGSAP.
 

This is the error message i'm getting:

Segment.tsx:39 Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
printWarning @ react.development.js:209
error @ react.development.js:183
resolveDispatcher @ react.development.js:1592
useRef @ react.development.js:1629
useGSAP @ index.js:32
(anonymous) @ Segment.tsx:39

react.development.js:1630 Uncaught TypeError: Cannot read properties of null (reading 'useRef')
    at useRef (react.development.js:1630:1)
    at useGSAP (index.js:32:1)
    at Segment.tsx:39:1
    at renderWithHooks (react-dom.development.js:16305:1)
    at updateForwardRef (react-dom.development.js:19226:1)
    at beginWork (react-dom.development.js:21636:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom.development.js:4277:1)
    at beginWork$1 (react-dom.development.js:27451:1)

 

here's what i have so far:

import React, { forwardRef, useEffect, useCallback, useRef } from "react";
import {
  useActiveSegment,
  BkExpeditionContextValues,
} from "src/BkExpedition/index";
import { mergeRefs } from "src/util/mergRefs";
import clsx from "clsx";
import gsap from "gsap/dist/gsap";
import { useGSAP } from "@gsap/react";

gsap.registerPlugin(useGSAP);

export type SegmentProps = Omit<
  React.ComponentPropsWithoutRef<"section">,
  "onAnimationStart" | "onDragStart" | "onDragEnd" | "onDrag" | "onDragOver"
> & {
  segmentKey: BkExpeditionContextValues["activeSegment"];
};

export const Segment = forwardRef<HTMLDivElement, SegmentProps>(
  (props, ref) => {
    const { segmentKey, className, children, ...restOfHtmlAttrs } = props;

    const { activeSegment, previousSegment } = useActiveSegment();
    const isActive = activeSegment === segmentKey;

    const sectionRef = useRef<HTMLDivElement>(null);

    const animateInTL = useRef<gsap.core.Timeline>();
    const animateOutTL = useRef<gsap.core.Timeline>();

    useGSAP(() => {
      // console.log("sectionRef", sectionRef.current);
      // if (sectionRef.current === null) return;
      //
      // animateInTL.current = gsap
      //   .timeline({ paused: true })
      //   .fromTo(sectionRef?.current, { x: "100%" }, { x: "0%" });
      // animateOutTL.current = gsap
      //   .timeline({ paused: true })
      //   .fromTo(sectionRef?.current, { x: "0%" }, { x: "-100%" });
    });

    useEffect(() => {
      if (previousSegment === null) {
        return;
      }

      if (activeSegment === segmentKey) {
        animateInTL?.current?.play();
        return;
      }

      if (previousSegment === segmentKey) {
        animateOutTL?.current?.play();
        return;
      }
    }, [activeSegment, previousSegment, segmentKey]);

    return (
      <section
        ref={mergeRefs(ref, sectionRef)}
        {...restOfHtmlAttrs}
        aria-hidden={!isActive}
        className={clsx(className, styles.segment, isActive && styles.isActive)}
        style={{
          transform: isActive ? "translateX(0%)" : "translateX(100%)",
        }}
      >
        {children}
      </section>
    );
  },
);

Segment.displayName = "Segment";

Am i not registering the book in the right place? Should it be registered inside the function component? FWIW - I plan to use this component in Next.js.

Any help would be really appreciated

 

-Gabriel

[Rodrigo]

Hi,

 

I can't see anything wrong in the code you posted, plus the latest version of the hook is importing useRef as you can see here:

https://github.com/greensock/react/blob/main/src/index.js

 

Can you provide a minimal demo on Stackblitz that illustrates this? 

 

https://stackblitz.com/

 

Happy Tweening!

[gabriel.ortiz]

35 minutes ago, Rodrigo said:

Hi,

 

I can't see anything wrong in the code you posted, plus the latest version of the hook is importing useRef as you can see here:

https://github.com/greensock/react/blob/main/src/index.js

 

Can you provide a minimal demo on Stackblitz that illustrates this? 

 

https://stackblitz.com/

 

Happy Tweening!

Thank you @Rodrigo. The hook itself looks good. I think the issue could be a mismatch of React versions. Looking at the package.json. I'm using version ^18. and the hook is using ^16. I do think there are some breaking changes between these versions. I've ran into issues like this before.  The error message: 
`Uncaught TypeError: Cannot read properties of null (reading 'useRef')`  I've read can be associated with version mismatches.

 

 

 

[Rodrigo]

The useGSAP hook has a dependency for at least React 16, but it doesn't use/install React 16:

  "dependencies": {
    "gsap": "^3.12.5",
    "react": ">=16"
  },

If you already have React 18 installing the @gsap/react package won't change a thing and won't install another version of React.

 

I just tested this on a demo here on my local machine using the latest version of Next without any issues. We only encountered some issues while importing the @gsap/react package from esm.sh, which solves by doing this:
 

import React from "https://esm.sh/react@18.3.1";
import ReactDOM from "https://esm.sh/react-dom@18.3.1";

import gsap from "https://esm.sh/gsap";
import { useGSAP } from "https://esm.sh/@gsap/react?deps=react@18.3.1";

We'll update the dependencies on the hook to be at least version 17 of React.

 

Finally it would be super helpful if you could create a minimal demo that reproduces this error.

 

Happy Tweening!

[AmethystKhoa]

11 hours ago, gabriel.ortiz said:

Thank you @Rodrigo. The hook itself looks good. I think the issue could be a mismatch of React versions. Looking at the package.json. I'm using version ^18. and the hook is using ^16. I do think there are some breaking changes between these versions. I've ran into issues like this before.  The error message: 
`Uncaught TypeError: Cannot read properties of null (reading 'useRef')`  I've read can be associated with version mismatches.

 

 

 

I have the same issue, just upgrade my dependencies of react and react-dom to the latest version (). Now it works on my end.

[gabriel.ortiz]

Thank you @AmethystKhoa That also fixed it for me!!!! I had the exact same versions! Thank you for your post!

Also thank you @Rodrigo for coming to my aid! Thanks yall!