Nextjs Cannot Import Parallax #627

giovannibonin · 2019-04-08T19:27:05Z

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: #278

The text was updated successfully, but these errors were encountered:

klaemo · 2019-04-10T09:54:51Z

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 · 2019-04-11T00:53:38Z

Is there no solution to this problem for nextjs?

…

On Wed, Apr 10, 2019 at 2:54 AM Clemens Stolle ***@***.***> wrote: It looks like react-spring is using the ESM version of @babel/runtime in its output bundle: var _extends = ***@***.***/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 <#627 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/Ati53FTQ-l0o0E_I-NI-KwIbeOftodjYks5vfbTvgaJpZM4ci7vf> .

gsambrotta · 2019-04-12T14:33:51Z

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

tm1000 · 2019-06-04T00:23:01Z

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

aleclarson · 2019-06-04T01:23:10Z

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 · 2019-06-04T01:28:29Z

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

aleclarson · 2019-06-04T01:32:34Z

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 · 2019-06-04T01:36:02Z

@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 · 2019-06-04T01:43:18Z

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 · 2019-06-04T01:46:23Z

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 · 2019-06-04T01:47:44Z

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 · 2019-06-04T01:49:13Z

Yes, exactly! Sorry for not being clear before.

tm1000 · 2019-06-04T01:49:39Z

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

deioo · 2019-08-13T20:40:58Z

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 · 2019-08-13T23:24:13Z

@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 · 2019-10-11T21:47:49Z

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 · 2019-10-12T00:12:05Z

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

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

nandorojo · 2019-10-13T01:56:21Z

@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 · 2019-10-13T13:34:02Z

@nandorojo Try installing without a caret range:

npm install react-spring@9.0.0-canary.808.4.e67bf81 --save-exact

nandorojo · 2019-10-13T18:24:11Z

@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 · 2019-10-13T18:44:15Z

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 · 2019-10-13T19:11:42Z

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 · 2019-10-14T14:55:52Z

@nandorojo Fixed in 9.0.0-canary.808.8.4a87fcb

Example repo here.

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

nandorojo · 2019-10-14T16:16:16Z

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

Really appreciate your taking the time for me.

honglish · 2020-03-30T15:09:29Z

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 · 2020-03-30T22:53:23Z

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

bryandandan · 2020-05-01T09:15:05Z

@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 · 2020-05-01T23:24:14Z

@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 · 2020-06-11T15:50:49Z

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 · 2020-07-10T11:07:50Z

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

benjaminbaldoni · 2020-09-06T19:55:01Z

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 #374 (comment)

Zain-ul-din · 2022-08-06T10:49:56Z

Simply do import { Parallax, ParallaxLayer } from 'react-spring' it's working for me.
"react-spring": "^9.5.2"

ibraDev-maqtechs · 2023-08-13T01:07:17Z

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

giovannibonin changed the title ~~Nextjs Cannot Import Parallax e~~ Nextjs Cannot Import Parallax Apr 8, 2019

aleclarson added the kind: bug Something isn't working label Apr 8, 2019

aleclarson closed this as completed May 27, 2019

tm1000 mentioned this issue Aug 13, 2019

react-spring v6 importing parallax not working #278

Closed

alexfrancavilla mentioned this issue Jul 17, 2021

NextJS compability xiaody/react-touch-carousel#38

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Nextjs Cannot Import Parallax #627

Nextjs Cannot Import Parallax #627

giovannibonin commented Apr 8, 2019 •

edited by aleclarson

klaemo commented Apr 10, 2019 •

edited

giovannibonin commented Apr 11, 2019 via email

gsambrotta commented Apr 12, 2019

tm1000 commented Jun 4, 2019

aleclarson commented Jun 4, 2019 •

edited

tm1000 commented Jun 4, 2019

aleclarson commented Jun 4, 2019 •

edited

tm1000 commented Jun 4, 2019 •

edited

tm1000 commented Jun 4, 2019 •

edited

aleclarson commented Jun 4, 2019

tm1000 commented Jun 4, 2019 •

edited

aleclarson commented Jun 4, 2019

tm1000 commented Jun 4, 2019

deioo commented Aug 13, 2019

tm1000 commented Aug 13, 2019 •

edited

nandorojo commented Oct 11, 2019 •

edited

aleclarson commented Oct 12, 2019 •

edited

nandorojo commented Oct 13, 2019 •

edited

aleclarson commented Oct 13, 2019

nandorojo commented Oct 13, 2019

aleclarson commented Oct 13, 2019 •

edited

nandorojo commented Oct 13, 2019

aleclarson commented Oct 14, 2019

nandorojo commented Oct 14, 2019 •

edited

honglish commented Mar 30, 2020 •

edited

mimiqkz commented Mar 30, 2020

bryandandan commented May 1, 2020

djammari commented May 1, 2020

franciscaluz commented Jun 11, 2020 •

edited

mimiqkz commented Jul 10, 2020

benjaminbaldoni commented Sep 6, 2020

Zain-ul-din commented Aug 6, 2022

ibraDev-maqtechs commented Aug 13, 2023

Nextjs Cannot Import Parallax #627

Nextjs Cannot Import Parallax #627

Comments

giovannibonin commented Apr 8, 2019 • edited by aleclarson

klaemo commented Apr 10, 2019 • edited

giovannibonin commented Apr 11, 2019 via email

gsambrotta commented Apr 12, 2019

tm1000 commented Jun 4, 2019

aleclarson commented Jun 4, 2019 • edited

tm1000 commented Jun 4, 2019

aleclarson commented Jun 4, 2019 • edited

tm1000 commented Jun 4, 2019 • edited

tm1000 commented Jun 4, 2019 • edited

aleclarson commented Jun 4, 2019

tm1000 commented Jun 4, 2019 • edited

aleclarson commented Jun 4, 2019

tm1000 commented Jun 4, 2019

deioo commented Aug 13, 2019

tm1000 commented Aug 13, 2019 • edited

nandorojo commented Oct 11, 2019 • edited

aleclarson commented Oct 12, 2019 • edited

nandorojo commented Oct 13, 2019 • edited

aleclarson commented Oct 13, 2019

nandorojo commented Oct 13, 2019

aleclarson commented Oct 13, 2019 • edited

nandorojo commented Oct 13, 2019

aleclarson commented Oct 14, 2019

nandorojo commented Oct 14, 2019 • edited

honglish commented Mar 30, 2020 • edited

mimiqkz commented Mar 30, 2020

bryandandan commented May 1, 2020

djammari commented May 1, 2020

franciscaluz commented Jun 11, 2020 • edited

mimiqkz commented Jul 10, 2020

benjaminbaldoni commented Sep 6, 2020

Zain-ul-din commented Aug 6, 2022

ibraDev-maqtechs commented Aug 13, 2023

giovannibonin commented Apr 8, 2019 •

edited by aleclarson

klaemo commented Apr 10, 2019 •

edited

aleclarson commented Jun 4, 2019 •

edited

aleclarson commented Jun 4, 2019 •

edited

tm1000 commented Jun 4, 2019 •

edited

tm1000 commented Jun 4, 2019 •

edited

tm1000 commented Jun 4, 2019 •

edited

tm1000 commented Aug 13, 2019 •

edited

nandorojo commented Oct 11, 2019 •

edited

aleclarson commented Oct 12, 2019 •

edited

nandorojo commented Oct 13, 2019 •

edited

aleclarson commented Oct 13, 2019 •

edited

nandorojo commented Oct 14, 2019 •

edited

honglish commented Mar 30, 2020 •

edited

franciscaluz commented Jun 11, 2020 •

edited