TypeError: Cannot read property 'offsetHeight' of null when using the Locomotive Scroll react module

Question

I am trying to load some images from firebase and have them scroll horizontally with the locomotive scroll react module. However, whenever I add the useEffect section below to initialise the locomotive scroll I get the following error:

I have followed all the instructions on LocomotiveScroll's website and GitHub pages and also looked at other examples but can't seem to figure it out. Or even maybe I have missed something.

import React, { useEffect } from "react";
import useFirestore from "../../Hooks/useFirestore";
import "./Astro.css";
import LocomotiveScroll from "locomotive-scroll";

//<a class="gallery__item-link">explore</a>

const Astro = (props) => {
  const { docs } = useFirestore("astro");
  let i = 1;

  const scrollReff = React.createRef();

  useEffect(() => {
    const scroll = new LocomotiveScroll({
      el: scrollReff.current,
      smooth: true,
      direction: "horizontal"
    });
  });

  return (
    <div>
      {docs &&
        docs.map((doc) => (
          <div key={doc.id}>
            <div ref={scrollReff}>
              <div className="content">
                <div className="gallery">
                  <figure className="gallery__item">
                    <div className="gallery__item-img">
                      <div class="gallery__item-img">
                        <div
                          class="gallery__item-imginner"
                        >
                          <img src={doc.url} alt={doc.description} />
                        </div>
                      </div>
                    </div>
                    <figcaption className="gallery__item-caption">
                      <h2
                        className="gallery__item-title"
                        data-scroll
                        data-scroll-speed="1"
                      >
                        {doc.title}
                      </h2>
                      <span className="gallery__item-number">{"0" + i++}</span>
                    </figcaption>
                  </figure>
                </div>
              </div>
            </div>
          </div>
        ))}
    </div>
  );
};

export default Astro;

Answer 1

React.createRef() is asynchronous so if you try to access it in useEffect, it will return null. This mean at the moment you call scrollRef.current at inside useEffect, you've not assigned any real instance to it.

Answer 2

I had the same problem then realized I forgot to add <main data-scroll-container ref={containerRef}> inside the <LocomotiveScrollProvider>.

Like this;

<LocomotiveScrollProvider
      options={{smooth: true,}}
      watch={[]}
      containerRef={containerRef}
 >
      <main data-scroll-container ref={containerRef}>
          <Component {...pageProps} />
      </main>
</LocomotiveScrollProvider>

Answer 3

From my perspective you need to add a condition because this issue is related to asynchronism. Inside useEffect you're using scrollReff when this variable not exists. Why? Because in the render you're conditioning if docs exist. If you understand how works useEffect, you understand that the first render useEffect is not finding this variable.

const Astro = (props) => {
  ...

  useEffect(() => {
    if(!docs) return;
    const scroll = new LocomotiveScroll({
      ...
    });
  });