useScroll ref is not hydrated

Container/Target ref is defined but not hydrated

You're attempting to use useScroll with target or container options and you've received this error.

const ref = useRef(null)

useScroll({ container: ref })

Explanation

You're attempting either to track an element target as it moves through the viewport. Or tracking the scroll progress of a scrollable element container other than the viewport.

For this, Motion needs a reference to that element.

Solution

The ref is not correctly being passed to an element. Ensure that it is:

<div ref={ref} />

It could be that you're passing this ref to another non-elemental component like this:

<Component ref={ref} />

Ensure that the Component is correctly forwarding this ref prop to a HTML or SVG element.