NextJS - react-springy-parallax doesn't work

Question

I'm trying to use react-springy-parallax in my NextJS project, but whenever I want to use it, I get the following error message:

Fetch API cannot load webpack://%5Bname%5D_%5Bchunkhash%5D/./node_modules/react-dom/cjs/react-dom.development.js?. URL scheme must be "http" or "https" for CORS request.

Is this is a limitation to react-springy-parallax on NextJS?

Here is the example code I put in my index.js component:

<Parallax ref='parallax' pages={3}>
  <Parallax.Layer offset={0} speed={0.5}>
    <span>Layers can contain anything</span>
  </Parallax.Layer>
</Parallax>

It seems the problem has something to do with a CORS issue and I don't know exactly how to approach a solution to this problem.

Answer 1

I've read that this has nothing to do with NextJS in particular. After React 16.8.0 and up, I read that I have to use the useRef function.

Solution:

import React, { useRef } from 'react'
[...]
const parallax = useRef( 'parallax' )
[...]
<Parallax ref={ parallax } pages={3}>

    <Parallax.Layer offset={0} speed={0.5} onClick={ () => parallax.current.scrollTo(1) }>

        <span>Layers can contain anything</span>

    </Parallax.Layer>

</Parallax>

Answer 2

Next Js has no problem with next Js. First initialize a variable to use as useRef

const parallax = useRef(null!)

Then you can start creating the parallax component and you should use the ParallaxLayer component instead of Parallax.Layer component

<Parallax pages={3} ref={parallax}>
  <ParallaxLayer offset={0} speed={0.5}>
    <span>Layers can contain anything</span>
  </ParallaxLayer>
</Parallax>

This will solve the problem, if you need example, check out this code, parallax in next JS