react-spring v6 importing parallax not working #278
Comments
|
Seems fine here: https://codesandbox.io/s/vyvl2pwnm0?from-embed I think it's got something to do with your buildsystem. Like if it cannot find babel. I do not include babel, just declare it as peer-dep. To be sure, can you try: import {.....} from 'react-spring/dist/addons.cjs' ? This would pull in the common js build |
|
I think the problem is with NextJS |
|
The old error is gone but now its throw this error instead. |
|
Really weird, could you share your repo somehow? It looks to me as if it doesn't pick up the correct entry point (which for the web is src/targets/web/index.js) -- in there the globals are set. Missing globals is almost certainly a weird entry. Or maybe tree-shaking is messing with it. In my projects i'm using straight webpack, and codesandbox, they all seem fine. It must be something peculiar in the way you fetch this lib. |
|
@drcmda https://github.com/iammarkps/openhouse This is my repo |
|
This is so weird, i tried to pluck out everything, just pasting a parallax example into index.js and it worked, the moment i do something else it falls appart. It says it can't find index.js:2429 GET http://localhost:3000/Users/drcmda/dev/openhouse/node_modules/react-spring/dist/addons.js 404 (Not Found) addons.js is right there node_modules Then i used the .cjs export, now it complains about global.raf not find, which is insane. Can it maybe be that next is using outdated babel or webpack inside? @TrySound Do you have any idea what this could be? Did this ever happen anywhere else? Maybe making a very reduced example and adding an issue in next.js's tracker would be the way to go. |
|
NextJS is using babel 7 |
|
@drcmda btw nextjs use file-system routing I think 'http://localhost:3000/Users/drcmda/dev/openhouse/node_modules/react-spring/dist/addons.js' won't work. |
|
but that was a standard |
|
Oh I thought you use it in browser sorry |
|
I'm also experiencing the same issue with Gatsby: You also can see the Netlify build there. |
|
Could you check if "global" is defined at all? It would be weird if that's not the case in a bundled environment. And if you go: global = { requestAnimationFrame: fn => requestAnimationFrame(fn), cancelAnimationFrame: fn => cancelAnimationFrame(fn) } Before the other stuff initializes, does that fix it? Would love to know the root of it ... it's such a strange issue ... |
Doing a
Putting it where? Placing it in my index.jsx file it tells me that You can try it yourself with the repo though. |
|
@iammarkps @LekoArts could you try [email protected]? I am exposing raf and caf as |
|
I updated, yeah. But I got a "window is not defined" error. It would be best to add this check to react-spring, not to my code: Because then |
|
Could this all be a symptom of these build tools? I haven't touched global.requestAnimationFrame or window.requestAnimationFrame and 5.x uses the same format. Both global/window should be fairly common. I think it would be best if next/gatsby sort this out, i am not sure at this point if there's something i can fix otherwise. I don't require or import Parallax anywhere, they are separate packages with standard esm/cjs exports. Wouldn't know where to put this window !== undefined stuff (and why). |
|
Thanks to @pieh I got it working: With the normal build. So it's definitely something on Gatsby's end (however you could also make react-spring SSR ready but one can't expect/demand that to happen). |
|
Are there any steps i would need to take in order to support SSR? I wasn't aware it would cause problems. |
|
I don't know specifics of Your library, but for component to be "SSR ready" you would want to access browser specific APIs (i.e. We potentially could create mocks in |
|
Errors out with the same one: |
|
@drcmda |
|
The problem exists because webpack and codesandbox silently polyfill this object but it's still not browser thing, it's node specific object. Rollup doesn't do anything with it out of the box, so the bundle is broken with it. |
|
@TrySound i brought this piece over from animated, i guess it uses/used global.raf because of react-native then. I always wondered why it used global. I'll default to window (+ SSR check) and set RN to global, that should work. |
|
@drcmda Sorry for not helping you fix this problem, I just got a lot of work at school. BTW Thanks you all for helping me with this |
|
hi,
|
|
Should be fixed now. PS. @LekoArts i used your gatsby starter for bugtesting, runs through now without the extra code that you had in there safeguarding against "window". |
|
@rainstormza what does it say? |
|
import { Parallax, ParallaxLayer } from "react-spring/dist/addons"; I tried to use parallax within nextjs project but when I run nextjs in dev mode it always throws this error. |
|
Hmm, wouldn't know what to do on my end, extends is a plain babel runtime method. If it's an unexpected identifier i think that's due to the build system or target system missing that dependency. |
|
@rainstormza I am in the nextjs spectrum chat, I have the sample code on https://codesandbox.io/s/n3zx9vykp, It seems from testing if you add the ``` import { Parallax, ParallaxLayer } from 'react-spring/dist/addons'; |
|
Which babel version do you run, is this babel latest or still the beta? |
|
PS. in this issue people are getting the same problem: gatsbyjs/gatsby#7668 And i think it's been because their SSR engine pinned a beta, which is incompatible with babel@stable. |
|
Latest
…On Nov 22, 2018, 2:55 AM -0500, Paul Henschel ***@***.***>, wrote:
PS. in this issue people are getting the same problem: gatsbyjs/gatsby#7668
And i think it's been because their SSR engine pinned a beta, which is incompatible with ***@***.***
—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub, or mute the thread.
|
|
S Tunji Turner |
|
I looked in the nextjs repo dependencies, "babel-core": "7.0.0-bridge.0", is what’s pinned |
|
Any updates on this? Experiencing the same issue when trying to deploy my NextJs app with some react-spring Parallax-components. |
|
Importing |
|
Awesome, thanks! This did the job for me aswell. |
keeps giving me the following error: |
|
@iammarkps @drcmda is this still an issue or can it be closed? |
|
Still seems to be an issue when using with Next.js |
|
I think the issue here is importing from When importing from the main module the I was having the same error when trying to run tests on the new hooks module but importing from |
|
As the @benlonsdale said. The issue is how we import |
|
I am getting a different error on 8.0.19 with NextJS and Parallax: Any idea how to solve this? |
|
Getting this error with CRA when running tests. CRA does not use Babel 7 yet. I have a typescript environment, but the file importing this is a normal JS file at the moment (have not migrated everything to ts yet). {
"react-scripts": "^3.0.1",
"ts-jest": "^24.0.2",
"jest": "24.7.1",
"react-spring": "^8.0.25",
"typescript": "^3.5.2",
}{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"noImplicitAny": false,
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": false,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "preserve"
},
"include": [
"src"
]
}//setupTest.js
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() }); |
|
I caught an error 'Parallax' is not exported from 'react-spring' and the simple solution was to update import string to |
|
Ref #627 |
When I tried to import parallax from 'react-spring/dist/addons' it's throwing me this error.
This is my import code
The text was updated successfully, but these errors were encountered: