[bug] Duplicate Locomotive Scroll Instances

[QuintonC]

Hey there,

I reached out to you on Twitter @toinelin, but an Issue definitely seems to be more fitting. I'm currently implementing the project in a Next.js website that uses server-side data to render conditional page sections.

For example, using WordPress with Advanced Custom Fields I map through the Flexible Content specified in my ACF data to render page sections as they are returned from gql.

I've done this with two projects, my personal site, and the one I'm currently working on.

My personal site is using the same structure, where _app.tsx utilizes LocomotiveScrollProvider to wrap all pages in the provider, e.g.

function MyApp({ Component, pageProps }: AppProps) {
  const containerRef = useRef(null);
  const { route } = useRouter();

  return (
    <ApolloProvider client={client}>
      <Provider store={store}>
        <LocomotiveScrollProvider
          options={{ smooth: true }}
          watch={[route]}
          containerRef={containerRef}>
          <BaseCSS />
          <main data-scroll-container className="container">
            <Component {...pageProps} />
          </main>
        </LocomotiveScrollProvider>
      </Provider>
    </ApolloProvider>
  );
}

The odd behavior that I'm seeing, however, is shown in the attached image.

You'll see that for some reason there are two scrollbars. Additionally, there seem to be two Scrolls in context. Utilizing const {scroll} = useLocomotiveScroll() provides me with the scroll context, and calling the .stop() method on it stops only one of the scrolls.

The real question here is why am I getting two scrolls? It's creating extremely strange behavior as you might expect.

[zumbidoweb]

same with nextjs

[Filip1139]

Yep, same problem here. Im working on nextjs app

[draZer0]

This probably is because you are developing with React Strict Mode. To identify any issues in your code, Strict Mode will render the components twice in development mode (not in production). This is useful to detect legacy API usage, unsafe lifecycles and more.

You might have reactStrictMode turned on in your next.config.js. Because of the side effects with LS, you probably shouldn't use Strict Mode in your entire application.

To solve your issue, you could use <React.StrictMode> on a page-by-page basis. Put it inside your LS provider to prevent the double render.

<LocomotiveScrollProvider ...> <React.StrictMode> <main> ... </main> </React.StrictMode> </LocomotiveScrollProvider>

[natainditama]

This probably is because you are developing with React Strict Mode. To identify any issues in your code, Strict Mode will render the components twice in development mode (not in production). This is useful to detect legacy API usage, unsafe lifecycles and more.

You might have reactStrictMode turned on in your next.config.js. Because of the side effects with LS, you probably shouldn't use Strict Mode in your entire application.

To solve your issue, you could use <React.StrictMode> on a page-by-page basis. Put it inside your LS provider to prevent the double render.

<LocomotiveScrollProvider ...> <React.StrictMode> <main> ... </main> </React.StrictMode> </LocomotiveScrollProvider>

Thank you. It's work for me

[jgandrade]

Still getting the same problem with Vite

[jgandrade]

[Smichaelidis]

maybe try to add this line in the App component.
useEffect(()=> window.dispatchEvent(new Event('resize')), [Component])
according to this post
https://stackoverflow.com/questions/68264720/how-to-correctly-use-locomotive-scroll-with-next-js-routing