useLocomotiveScroll is returing null inside scroll

[deepushajia]

const { scroll } = useLocomotiveScroll()
I have used this hook to get an instance of scroll but is returning null in one of my component. The rest of the setup is done according to the documentation.

[nashvinxtn]

Hello,

Have the same prob?
Any solution plz..

[thiagorossener]

I'm having the same issue

[rowanblub]

Any new updates on this? Same problem here @toinelin

[shannonhochkins]

Just add a check for it:

const { scroll } = useLocomotiveScroll()
useEffect(() => {
        if (scroll) {
            // will only hit this once
        }
    }, [scroll]);

[squalvj]

Just add a check for it:

const { scroll } = useLocomotiveScroll()
useEffect(() => {
        if (scroll) {
            // will only hit this once
        }
    }, [scroll]);

doesnt work for me, having this issue as well

[adamatronix]

I am too. But I have the provider in a layout file wrapping my pages rather than the whole app since I'm using gatsby.

I get the error react-locomotive-scroll: the context is missing. You may be using the hook without registering LocomotiveScrollProvider, or you may be using the hook in a component which is not wrapped by LocomotiveScrollProvider.

I believe it's unrelated since there is smooth scrolling and everything else is still working.

[sctgraham]

Did anyone find a workaround ? I've been facing the same issue (the context is missing inside a NextJS app). Thanks.

[antoinelin]

Hi, sorry for not having reply to this one. Could you give me a repro so that I can try to help? I'm not using gatsby so maybe there is something missing related to this usage. @adamatronix I fixed the display of this error message, it should be good now if you update the package

[connorhvnsen]

Experiencing issue as well in Nextjs environment.

[ndimatteo]

Also experiencing this in Next.js, unable to to do anything with scroll due to it always being null despite no other errors and having the provider component wrapping my page component in _app.js

Any idea what's up with this?

[V3ntus]

Not exactly sure the exact case is:

// Import scroll stuff
import {
  LocomotiveScrollProvider,
  useLocomotiveScroll,
} from "react-locomotive-scroll";

...

function App() {
	// Define scroll
	const { scroll } = useLocomotiveScroll();

	// Define the loco scroll ref
	const locoscroll = React.useRef(null);

	return(<LocomotiveScrollProvider
  	    options={{ smooth: true }}
 	     containerRef={locoscroll}
 	     watch={[]}
	    >
	    ...
	    // Button that should scroll to another ref within the data-scroll-container
	    <button onClick={() => scroll.scrollTo(anotherRef)}>Button</button>
	    ...
	    <main data-scroll-container ref={locoscroll} id="loco-scroll-container">
    		...
    		// anotherRef is inside here
	    </main>
	  )
}

(Note button is outside data-scroll-container)

Uncaught TypeError: Cannot read properties of null (reading 'scrollTo')

[V3ntus]

const scrollInst = useLocomotiveScroll();
const scroll = scrollInst.scroll;
React.useEffect(() => {
    console.log(scrollInst);
  }, [scrollInst, scrollInst.isReady]);

isReady never seems to go true and I'm not exactly sure why

[V3ntus]

Related to #11

[dlarroder]

I have the same issue, any updates on this? @toinelin

[farissyf30]

any update @toinelin ?, i have some issue

[Fedinjo]

@deepushajia @nashvinxtn @farissyf30 @ndimatteo

Hi, I think I've got the solution, and it's very very trivial:

be sure EACH section or div that have attributes such as 'data-scroll', 'data-scroll-speed'... are wrapped into a 'data-scroll-section'.

Here is an example:

Without "data-scroll-section", it gives the error below:

[nashvinxtn]

@Fedinjo Already have the data-scroll-section, but still not working.
I have something like that in react :
<LocomotiveScrollProvider
options={{
smooth: true,
repeat: true,
inertia: 0.35,
class: "is-reveal",
getDirection: true,
smoothMobile: false,
}}
watch={[]}
containerRef={containerRef}
onLocationChange={scroll => scroll.scrollTo(0, {})}
onUpdate={() =>
document.body.classList.remove("scroll-up", "scroll-down")
}
>

ALL sections Here....

[Jvillani-fend]

Apparently is a bug i had the same issue but if you have a global layout component with scroll instantiated you can wrap all in a context provider and set a react state to the scroll param returned in LocomotiveScrollProvider like this:

//Create the context

const ScrollContext = React.createContext();

//...your layout component
<Layout>
 const [scrollInstance, setScrollInstance] = useState(null); //the state that will contain the scroll instance
  return (
    <>
        <ScrollContext.Provider value={scrollInstance}>
                    <LocomotiveScrollProvider
            options={{
              smooth: true,
            }}
            watch={route.pathname}
            containerRef={containerRef}
            onUpdate={(scroll) => {
              setScrollInstance(scroll); // here is where you set the state
            }}
          >
            
              <div
                data-scroll-container
                ref={containerRef}
                className="content-wrapper js-content-wrapper"
              >
                {children}
              </div>
           
          </LocomotiveScrollProvider>
          </ScrollContext.Provider>
    </>
  );
}
</Layout>
//this is a custom hook to get the scroll instance using useContext
export function useScrollContext() {
  const ScrollInstance = useContext(ScrollContext);
  return { ScrollInstance };
}