React-spring: Nextjs Cannot Import Parallax

[giovannibonin]

I've had this issue that others seem to be having when using Nextjs, that I cannot import Parallax. It seems that by changing how renderprops is imported on react-spring/renderprops-addons.cjs.js fixes the issue. I.e:

change to
var renderprops = require(react-spring/renderprops.cjs');
from
var renderprops = require(react-spring/renderprops');

Would that break something else or is there a reason this hasn't been PR'd yet?

Related: https://github.com/react-spring/react-spring/issues/278

[klaemo]

It looks like react-spring is using the ESM version of @babel/runtime in its output bundle:

var _extends = _interopDefault(require('@babel/runtime/helpers/esm/extends'));

nextjs doesn't transpile node_modules so you end up with import/export syntax in node.

As @giovannibonin describes: renderprops-addons.cjs.js requires renderprops.js, but should in fact use renderprops.cjs.js

[giovannibonin]

Is there no solution to this problem for nextjs?

On Wed, Apr 10, 2019 at 2:54 AM Clemens Stolle [e-mail]
wrote:

It looks like react-spring is using the ESM version of @babel/runtime in
its output bundle:

var _extends = _interopDefault(require('@babel/runtime/helpers/esm/extends'));

nextjs doesn't transpile node_modules so you end up with import/export
syntax in node.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/react-spring/react-spring/issues/627#issuecomment-481624038,
or mute the thread
https://github.com/notifications/unsubscribe-auth/Ati53FTQ-l0o0E_I-NI-KwIbeOftodjYks5vfbTvgaJpZM4ci7vf
.

[gsambrotta]

You can downgrade to react-spring 7 until it will be fixed

[tm1000]

This is still an issue. Why is it closed without reference @aleclarson

[aleclarson]

Sorry. The react-spring/renderprops entry point is deprecated. It won't exist in v9.

In v9, you can do import { Spring } from 'react-spring' instead.

The OP was trying to require the ESM entry point, which apparently isn't allowed in NextJS (nor should it be). In v8, you can do one of the following:

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

[tm1000]

@aleclarson how does one import addons in 9 (yes seems to work for spring) as this thread is talking about addons specifically.

[aleclarson]

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')

[tm1000]

@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

[tm1000]

I've spent some time confirming this is still infact an issue and should be addressed.

The compiled renderprops-addons.cjs.js references the wrong (non cjs) renderprops file so you get the un "babelized" version of it, which makes it explode. If you change the require line on line 11 from

var renderprops = require('react-spring/renderprops'); to var renderprops = require('react-spring/renderprops.cjs');

It works in both 8 and 9

[aleclarson]

It's all working in the next v9-beta, which I'm trying to publish asap.

Anyone who wants v8 to work, please send a PR. Here's a good place to start looking: https://github.com/react-spring/react-spring/blob/f2cfad54f77aad26736c56e4f944c474b8d5cbda/rollup.config.js#L110

I'm keeping this closed since it's an issue with an old version.

[tm1000]

I tried it in 9 and it fails with the same reasoning when doing

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

or

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

If you mean that it will work once you publish support for

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

Then I understand and will wait until it's done :-)

[aleclarson]

Yes, exactly! Sorry for not being clear before.

[tm1000]

@aleclarson ok carry on thank you for being so patient! :-D

[deioo]

This still seem to be an issue regardless of Next.js or spring versions, e.g
https://codesandbox.io/s/hello-world-1xx6c

The error is different, but I believe it's the same issue?

[tm1000]

@deioo I check this weekly and yes react-spring 9 still does not work with NextJS. I believe when @aleclarson gets closer the build will change and it will start working.

If you jump all the way back to 7.x it will work but there's no hooks support in 7.

It's effectively the same issue. It's because it's loading the non-transpiled version of react-spring.

[nandorojo]

Using next 9.0.3 and react-spring 8.0.27 and still getting this issue on Next.js.

This is only an issue on next. It does work as intended on a regular project (code sandbox).

Tried importing with each of the following, unsuccessfully:

const {
    Parallax,
    ParallaxLayer,
} = require('react-spring/renderprops-addons.cjs')
// also tried...
const {
    Parallax,
    ParallaxLayer,
} = require('react-spring/renderprops-addons.cjs.js')
// and this:
import { Parallax, ParallaxLayer } from 'react-spring/renderprops-addons.cjs.js'
// and others, including:
import { Parallax, ParallaxLayer } from 'react-spring/renderprops-addons'

And I'm getting this error:

(I changed the paths to /path/to)

Unexpected token export
/path/to/node_modules/@babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js:1
export default function _objectWithoutPropertiesLoose(source, excluded) {
^^^^^^

SyntaxError: Unexpected token export
    at Module._compile (internal/modules/cjs/loader.js:723:23)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.<anonymous> (/path/to/node_modules/react-spring/renderprops.js:7:53)
    at Module._compile (internal/modules/cjs/loader.js:778:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.<anonymous> (/path/to/node_modules/react-spring/renderprops-addons.cjs.js:11:19)

Thanks for your attention!

[aleclarson]

@nandorojo Can you try with the latest canary? Thanks 👍

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

[nandorojo]

@aleclarson Thanks so much for the quick response! Really appreciate your time.

Unfortunately still getting an error. I updated:

package.json

  "react-spring": "^9.0.0-canary.808.4.e67bf81",

And imported like this:

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

I'm getting this error in the server logs:

Module not found: Can't resolve 'shared' in 'path/to/node_modules/react-spring/node_modules/@react-spring/addons'
path/to/node_modules/react-spring/addons.js:1
export * from '@react-spring/addons';
^^^^^^

SyntaxError: Unexpected token export
    at Module._compile (internal/modules/cjs/loader.js:723:23)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.react-spring/addons (path/to/.next/server/static/development/pages/index.js:247:18)
    at __webpack_require__ (path/to/.next/server/static/development/pages/index.js:23:31)
    at Module../pages/index/index.tsx (path/to/.next/server/static/development/pages/index.js:107:77)
    at __webpack_require__ (path/to/.next/server/static/development/pages/index.js:23:31)
    at Object.3 (path/to/.next/server/static/development/pages/index.js:224:18)
    at __webpack_require__ (path/to/.next/server/static/development/pages/index.js:23:31)
    at path/to/.next/server/static/development/pages/index.js:91:18
    at Object.<anonymous> (path/to/.next/server/static/development/pages/index.js:94:10)
    at Module._compile (internal/modules/cjs/loader.js:778:30)

[ error ] ./node_modules/react-spring/node_modules/@react-spring/addons/index.js
Module not found: Can't resolve 'shared' in 'path/to/node_modules/react-spring/node_modules/@react-spring/addons'
ModuleNotFoundError: Module not found: Error: Can't resolve 'shared' in 'path/to/node_modules/react-spring/node_modules/@react-spring/addons'
    at factory.create (path/to/node_modules/webpack/lib/Compilation.js:888:10)
    at factory (path/to/node_modules/webpack/lib/NormalModuleFactory.js:401:22)
    at resolver (path/to/node_modules/webpack/lib/NormalModuleFactory.js:130:21)
    at asyncLib.parallel (path/to/node_modules/webpack/lib/NormalModuleFactory.js:224:22)
    at path/to/node_modules/neo-async/async.js:2830:7
    at path/to/node_modules/neo-async/async.js:6877:13
    at normalResolver.resolve (path/to/node_modules/webpack/lib/NormalModuleFactory.js:214:25)
    at doResolve (path/to/node_modules/enhanced-resolve/lib/Resolver.js:184:12)
    at hook.callAsync (path/to/node_modules/enhanced-resolve/lib/Resolver.js:238:5)
    at _fn0 (eval at create (path/to/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at resolver.doResolve (path/to/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:37:5)
    at hook.callAsync (path/to/node_modules/enhanced-resolve/lib/Resolver.js:238:5)
    at _fn0 (eval at create (path/to/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at hook.callAsync (path/to/node_modules/enhanced-resolve/lib/Resolver.js:238:5)
    at _fn0 (eval at create (path/to/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:27:1)

And in the browser, I'm seeing this error:

Failed to compile

./node_modules/react-spring/node_modules/@react-spring/addons/index.js
Module not found: Can't resolve 'shared' in '/path/to/node_modules/react-spring/node_modules/@react-spring/addons'

I am using typescript with next, could that be related to the issue?

Thanks again.

[aleclarson]

@nandorojo Try installing without a caret range:

npm install [email protected] --save-exact

[nandorojo]

@aleclarson Updated:

 "react-spring": "9.0.0-canary.808.4.e67bf81",

Still getting the same error as the previous comment. Let me know if there's anything else you think I should try. Thanks!

[aleclarson]

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. 👍

[nandorojo]

I did, still same error. Happy to make a git repo. Here you go:

https://github.com/nandorojo/react-spring-next-issue

git clone https://github.com/nandorojo/react-spring-next-issue
cd react-spring-next-issue
npm i && npm run dev

[aleclarson]

@nandorojo Fixed in 9.0.0-canary.808.8.4a87fcb

Example repo here.

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

[nandorojo]

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

Really appreciate your taking the time for me.

[honglish]

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'

[mimiqkz]

@honglish I also have the same issue, I am wondering if everything else works fine for you ?

[bryandandan]

@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'

[djammari]

@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",

[franciscaluz]

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?

[mimiqkz]

How is this issue still "Closed" can someone reopen this?

[benjaminbaldoni]

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