Could not find `react-scroll-parallax` context value. Please ensure the component is wrapped in a <ParallaxProvider>

[burasov-artyom]

Good afternoon. I can't use this library after moving the project from CRA to Next.js. I get an error that the provider cannot be imported, although it is added to _app.jsx.

Has anyone encountered a similar problem?

_app.jsx

const App = ({ Component, pageProps }) => {
    return (
        <ParallaxProvider>
            <WagmiConfig config={wagmiConfig}>
                <ScrollToTop />

                <ApolloProvider client={defaultClient}>
                    <Provider store={store}>
                            <Component {...pageProps} />
                    </Provider>
                </ApolloProvider>
            </WagmiConfig>
        </ParallaxProvider>
    )
}

parallax component

import { useParallax } from "react-scroll-parallax";

const Bubble = ({ isLeft, className, children }) => {
    const { ref } = useParallax({
        rotate: isLeft ? [0, 20] : [0, -20],
        translateY: [40, -40]
    });

    return (
        <div className={className} ref={ref}>
            { children }
        </div>
    );
};

export default Bubble;

List of related npm package versions

"next": "^14.0.2",
"react-scroll-parallax": "^3.4.3",

[TechSynthesis]

I have the same issue. Been trying to resolve it for months

[raRaRa]

I have a PR that should fix these issues: https://github.com/jscottsmith/react-scroll-parallax/pull/234

[jscottsmith]

Please try v3.4.4 to see if this issue is resolved.

[burasov-artyom]

Problem resolved. Thanks a lot

[burasov-artyom]

After fixing the problem, the following error is spammed in the console

[jscottsmith]

@burasov-artyom Can you provide some steps to reproduce? Guessing this happens after making changes, but I haven't been able to verify on my end.

[raRaRa]

I'm having the same issue on certain pages that don't have any Parallax components. Maybe that could be related to the issue? It works if I start on a page that has Parallax components and then navigate to another one without any with client-side routing.

[raRaRa]

Well, maybe not the same error:

Uncaught TypeError: Cannot read properties of undefined (reading 'length')
    at ParallaxController._handleScroll (parallax-controller.esm.js:1064:1)

[jscottsmith]

Thanks, I was able to reproduce the error. I'll look into it.

[jscottsmith]

Alright, give v3.4.5 a try.

[burasov-artyom]

Great! Works without errors