Using with Next.js and gives an error for ParallaxProvieder when using useController()

[hrahimi270]

Expected Behavior

Able to use useController() in my next.js app.

Actual Behavior

It throws an error that:

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

Steps to Reproduce the Problem

1. I placed ParallaxProvieder in my _app.js file.
2. I created my parallax component and it's working fine!
3. I created a ParallaxCache component just like the example.
4. I put ParallaxCache beside my parallax component and it gives me the error.

Environment

• Next version: 9.0.5
• Browser: chrome last update

[jscottsmith]

@hrahimi270 Thanks for the issue.

I think this because Next js renders on the server and the controller is not available. Check for typeof window !== 'undefined' then call the useController in ParallaxCache.

Let me know if you need further explanation, or share the repo with me.

[hrahimi270]

@jscottsmith Thanks for the reply.
I will test it to let you know.
But if context couldn't be found, then how Parallax component works?

[jscottsmith]

It shouldn't work on the server (just rendering the html to send to the client), but when React hydrates on the client side the Parallax context will be created and should run fine.

[jscottsmith]

To give you a little more context, see the provider which creates the controller and provides it in React context api.

https://github.com/jscottsmith/react-scroll-parallax/blob/master/src/components/ParallaxProvider.js#L12

[jscottsmith]

@hrahimi270 let me know if this doesn't solve your issue.

[sebinievas]

@jscottsmith so i'm stepping into this almost 3 months later and i'm experiencing the same issue still. I cannot get a simple example to work for this. I did manage to pull down like an old example from next 4 i believe, from 2018, and that actually worked! But cannot get it to work here. I realize this may be more of a nextjs question, but any more light you can shed would be great.

[hrahimi270]

@sebinievas I was able to use this package in my project. Even without useController() hook.
What is your problem exactly? can you provide some code here?

[sebinievas]

Absolutely, thank you! https://gist.github.com/sebinievas/5f597c5713ef0888a36352964efd90dc

At this moment i'm just simply trying to get the code to execute. It's pretty much a vanilla nextjs app for one single page i'm building. So I'm not even dealing with routes really. I'm sure it's something right under my nose.

[hrahimi270]

@sebinievas Thanks.
There is nothing wrong with your ParallaxProvider.
But in the test.js file, I'm not sure about using offsetYMin and offsetYMax props.
As I remember and written in documents, you should use like y={[ -10, 10 ]}.
For more information, read this section of the document:
https://github.com/jscottsmith/react-scroll-parallax#parallax-props

[sebinievas]

Thank you! I think this is working. I created a brand new project just to test this out, and it seems to be working! I must have pulled an OLD example? Sigh... glad its working!

…

On Wed, Mar 25, 2020 at 3:06 AM Hossein Rahimi ***@***.***> wrote: @sebinievas <https://github.com/sebinievas> Thanks. There is nothing wrong with your ParallaxProvider. But in the test.js file, I'm not sure about using offsetYMin and offsetYMax props. As I remember and written in documents, you should use like y={[ -10, 10 ]}. For more information, read this section of the document: https://github.com/jscottsmith/react-scroll-parallax#parallax-props — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#79 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAC5IRL64W4UHOFUZTGO273RJHJQVANCNFSM4J6RPCFQ> .

[dowrow]

How can I make the useController() hook work with Next.JS if it's server-side generated?

[mwskwong]

@hrahimi270 Thanks for the issue.

I think this because Next js renders on the server and the controller is not available. Check for typeof window !== 'undefined' then call the useController in ParallaxCache.

Let me know if you need further explanation, or share the repo with me.

Perhaps I missed it, but I think it would be a good idea if you provide the ParallaxCache component out of the box. Here is my version of the component. Basically, it is the one mentioned in the doc with the addition of monitoring resize event.

Also, would it be a good idea to use useEffect instead?

import { useController } from "react-scroll-parallax";
import { useLayoutEffect } from "react";

const ParallaxCache = () => {
  const { parallaxController } = useController();

  useLayoutEffect(() => {
    const handler = () => parallaxController.update();
    window.addEventListener("load", handler);

    const resizeObserver = new ResizeObserver(handler);
    resizeObserver.observe(document.body);

    return () => {
      window.removeEventListener("load", handler);
      resizeObserver.unobserve(document.body);
    };
  }, [parallaxController]);

  return null;
};

export default ParallaxCache;

[petr-hajek]

For me the only solution how to use it with Next.js with parallax in multiple pages was to include this component on the client side. Strange thing is that it needs the setTimeout to work even if it's 0ms. Hope it helps someone.

import { useRouter } from 'next/router';
import { useLayoutEffect } from 'react';
import { useController } from 'react-scroll-parallax';

export const ParallaxCacheFixer = () => {
	const { parallaxController } = useController();
	const router = useRouter();

	useLayoutEffect(() => {
		const handleRouteChange = () => {
			// This timeout is a very hacky solution
			setTimeout(() => {
				parallaxController.update();
			}, 0);
		};
		router.events.on('routeChangeComplete', handleRouteChange);
		return () => {
			router.events.off('routeChangeComplete', handleRouteChange);
		};
	}, [parallaxController, router.events]);

	return null;
};