`TypeError: null is not an object (evaluating 'O.current.clientHeight')`

[5starkarma]

Hello,

Our Sentry logs keep getting a type error pointing to this library. It seems that it is saying that an object (html) doesn't exist. Wondering what the cause of this could be. We are using create-react-app, no SSR. The only thing I can think is that there are several of these sections and the images are lazy loaded - but why would that affect it? Any thoughts?

Sentry Logs Screenshot

Usage

      <section className={styles.systemFeaturesFrame} id="systemFeaturesFrame">
        <div className={styles.headerContainer}>
          <AnimationOnScroll animateIn="animate__flipInX" offset={-300}>
            <h1 className={styles.systemFeaturesText}>
              System{" "}
              <span className={styles.systemFeaturesTextBold}>Features</span>
            </h1>
          </AnimationOnScroll>
        </div>
        <div className={styles.dashboardImgContainer}>
          <div className={styles.dashboardGlow} />
          <picture className={styles.dashboardImgPic}>
            <source srcSet={dashboardImg} type="image/avif" />
            <img
              loading="lazy"
              src={dashboardImgFallback}
              className={styles.dashboardImg}
              alt="Dashboard"
            />
          </picture>
        </div>

Problem Description

It looks like there's a TypeError in the react-animation-on-scroll library. The error message says that O.current.clientHeight is null and cannot be accessed. The error happened on line 159 of ../node_modules/react-animation-on-scroll/src/components/AnimationOnScroll.tsx.

Proposed Solution

To fix this issue, you need to make sure that the O.current object is not null before trying to access its clientHeight property. One way to do this is by adding a null check before accessing the property. Here's an example of what the fixed code could look like:

const elementBottom = O.current ? elementTop + O.current.clientHeight : 0; You should add this change directly to the AnimationOnScroll.tsx file, at line 159.

To prevent this issue from happening in the future, make sure to always check for null or undefined values before accessing their properties. You can also use TypeScript or other static type checkers to catch these errors before runtime.