Jump to content
Search Community

useGSAP not registering `useRef`

gabriel.ortiz
Moderator Tag

Go to solution Solved by AmethystKhoa,

Recommended Posts

gabriel.ortiz
Posted

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

Screenshot 2024-04-26 at 12.18.48 PM.png

gabriel.ortiz
Posted
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.

 

 


 

Posted

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/[email protected]";
import ReactDOM from "https://esm.sh/[email protected]";

import gsap from "https://esm.sh/gsap";
import { useGSAP } from "https://esm.sh/@gsap/[email protected]";

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!

  • Like 1
  • Solution
AmethystKhoa
Posted
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.image.thumb.png.df2fce2b30d726359d56015f7cde44d3.png

  • Like 1
  • Thanks 1
gabriel.ortiz
Posted

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!

  • Like 1
  • 6 months later...
Posted

Hey,

I'm having the same issue with React v19
 

"react": "19.0.0-rc-02c0e824-20241028",

 

That's the version that comes with Next.js v15.0.2 at the moment.

After reading the whole thread, I'm still confused about how to fix this version mismatch issue.

Here's my GSAP version:

"@gsap/react": "^2.1.1",

"gsap": "npm:@gsap/shockingly@^3.12.5",

Any help would be appreciated.

Posted

Hi,

 

We'll have to check that, but is really on Next to be using a release candidate version of React in a production release of their own.

 

I'll report back ASAP with any findings on the subject.

  • Like 1
  • 3 weeks later...
Posted
On 10/31/2024 at 7:55 PM, G54P said:

Hey,

I'm having the same issue with React v19
 

"react": "19.0.0-rc-02c0e824-20241028",

 

That's the version that comes with Next.js v15.0.2 at the moment.

After reading the whole thread, I'm still confused about how to fix this version mismatch issue.

Here's my GSAP version:

"@gsap/react": "^2.1.1",

"gsap": "npm:@gsap/shockingly@^3.12.5",

Any help would be appreciated.

I had this issue some days back, and I couldn't find a solution except to downgrade the version of both react and react-dom to 18.3.1.

Posted

Hi,

 

Indeed the issue stems from the fact that Next is using a release candidate of React and ReactDOM instead of the latest production build:

https://github.com/vercel/next.js/blob/canary/package.json#L212

 

My best guess is that there has to be a feature in the upcoming release of React that is critical for Next and they won't wait until an official release of React, so they want ahead and released their production build anyways. Using this basically creates a conflict in the packages being installed which ends up with two different React versions installed. React complains about this causing the issue of this thread.

 

We're looking into finding a way to avoid this hassle and that our users don't have to resort to any type of hacks in order to use our hook.

 

We'll keep you posted in this thread of our progress on this subject.

 

Thanks everyone for your patience 🙏

 

Finally as a personal opinion, I would strongly suggest you to use the latest 14.x version of Next, instead of changing the dependencies of the main package, since that could lead to unexpected results:

npx create-next-app@14

That will install the latest release of v14.

  • Like 1

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