react-spring: Nextjs Cannot Import Parallax

Same problem happens with react-spring 8.0.27 and also with current react-spring@next version. I was able to solve it transpiling react-spring 8.0.27 using next-transpile-modules.

On next.js.config:

const withTM = require('next-transpile-modules')(['react-spring'])

module.exports = withTM()

and then

import { Parallax, ParallaxLayer } from 'react-spring/renderprops-addons'

Credits to @Jessidhia https://github.com/react-spring/react-spring/issues/374#issuecomment-460533248

@nandorojo Fixed in 9.0.0-canary.808.8.4a87fcb

Example repo here.

import { Parallax, ParallaxLayer } from '@react-spring/parallax'

@aleclarson i used the 9.0.0-canary.808.8.4a87fcb version you suggested to @nandorojo and the suggested import, however I’m getting the following error: ModuleNotFoundError: Module not found: Error: Can't resolve '@react-spring/parallax'

check your dependencies… should be : “@react-spring/parallax”: “9.0.0-canary.808.8.4a87fcb”, suspect yours is: “react-spring”: “9.0.0-canary.808.8.4a87fcb”,

hi, i added the latest beta version, but also can’t seem to be able to add the parallax on Next.js. Any suggestions or news if this was fixed?

Did you try with the .cjs export?

const { Parallax, ParallaxLayer } = require('react-spring/addons.cjs')

If that doesn’t work, please make a git repository that I can debug. 👍

Yes, exactly! Sorry for not being clear before.

This is still not working on “next”: “13.4.12”, “react-spring”: “^9.7.2”. Tried the above code, got an error. `Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it’s defined in, or you might have mixed up default and named imports.

Check the render method of ParrallexSlider.`

How is this issue still “Closed” can someone reopen this?

@aleclarson i used the 9.0.0-canary.808.8.4a87fcb version you suggested to @nandorojo and the suggested import, however I’m getting the following error: ModuleNotFoundError: Module not found: Error: Can't resolve '@react-spring/parallax'

This is good, except I have one issue with this, which is that it’s wanting the props scrolling to be a string, and it doesn’t work regardless of what you use

I just manually hid it by passing the styles, overflowY: ‘hidden’

@aleclarson Ah, yes!! Thanks so much, updated my project and it’s working.

Really appreciate your taking the time for me.

@aleclarson This is actually still an issue

In 9 (and also 8)

const {
	Parallax,
	ParallaxLayer,
} = require('react-spring/renderprops-addons.cjs');

fails with Unexpected token export because its doing what @klaemo stated earlier

The next v9-beta will work like this:

import { Parallax } from '@react-spring/addons'

The current v9-beta works just like v8.

import { Parallax } from 'react-spring/renderprops-addons'
const { Parallax } = require('react-spring/renderprops-addons.cjs')