Scroll object appears to be incomplete

[canadianeagle]

Hello,

Thanks for making this port. I came across this issue. I'm running Gatsby v3 and initialized by app like so in layout.js : `<LocomotiveScrollProvider options={ { smooth: true,

          // ... all available Locomotive Scroll instance options 
        }
      }
      watch={
        [
          //...all the dependencies you want to watch to update the scroll
        ]
      }
      containerRef={containerRef}
    >
      <div data-scroll-container ref={containerRef}>
        <main>{children}</main>
        <Footer />        
      </div>
    </LocomotiveScrollProvider>`

Then in my index.js page, I call the scroll variable: const scroll = useLocomotiveScroll();

When I log the object to the console, it appears to be missing many things, including the scrollTo function. This is all that is in the scroll variable. { "scroll": null, "isReady": false }

If I initialize the variable as const {scroll}= useLocomotiveScroll(); - I get undefined.

Can you please help?

Thanks in advance :)

[antoinelin]

Hello !

Thank you for reaching me out 🙏🏻 I'm not using Gatsby, but two things should look to resolve this:

• Does the index.js page is well wrapper by the layout as a child component ? If not, the provider is not existing in the context of the page
• Did you check to add dependencies you should have on the watch props to reload the scrollRef accordingly?

On my side I'm gonna improve a bit this package today, I will add warnings if something vital is missing (like the context). If you can give me a codesandbox for Gatsby with a reproductible env it will help me a lot to provide good advices for your case

[antoinelin]

FYI: currently adding more logging messages in #12

[canadianeagle]

Hi Toinelin,

Thanks for the quick response :))

Here's a codesandbox - https://codesandbox.io/s/wild-shadow-4sskn?file=/src/components/layout.js Looks like locomotive scroll only triggers if you open the sandbox in a separate window. I've logged the scroll data to the console as well on there.

To answer your questions, the index.js page is wrapped with layout.

For your second question, I'm not sure there's anything I should be watching; do you have an example of what this watch section should look like?

Thanks again!

[kevin-xtn]

@canadianeagle @toinelin having this same issue, any solutions?

[antoinelin]

Hey, I will look a it this week-end. Sorry for the late answer again 🙏🏻

[kevin-xtn]

Hey, I will look a it this week-end. Sorry for the late answer again 🙏🏻

@toinelin any updates?

[adamatronix]

Hi, I was having issues with this as well. I was adding the provider on a layout component, however what we should be doing for Gatsby is adding it on the wrapRootElement method in gatsby-browser and gatsby-ssr.