react-spring v6 importing parallax not working

[iammarkps]

Unexpected identifier

/Users/iammark/Projects/openhouse/node_modules/react-spring/dist/addons.js:1
(function (exports, require, module, __filename, __dirname) { import _extends from '@babel/runtime/helpers/esm/extends';
                                                                     ^^^^^^^^

SyntaxError: Unexpected identifier
    at new Script (vm.js:79:7)
    at createScript (vm.js:251:10)
    at Object.runInThisContext (vm.js:303:10)
    at Module._compile (internal/modules/cjs/loader.js:657:28)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:20:18)
    at Object.react-spring/dist/addons (/Users/iammark/Projects/openhouse/.next/server/static/development/pages/index.js:2031:18)
    at __webpack_require__ (/Users/iammark/Projects/openhouse/.next/server/static/development/pages/index.js:23:31)
    at Module../pages/index.js (/Users/iammark/Projects/openhouse/.next/server/static/development/pages/index.js:1785:82)
    at __webpack_require__ (/Users/iammark/Projects/openhouse/.next/server/static/development/pages/index.js:23:31)
    at Object.3 (/Users/iammark/Projects/openhouse/.next/server/static/development/pages/index.js:1964:18)
    at __webpack_require__ (/Users/iammark/Projects/openhouse/.next/server/static/development/pages/index.js:23:31)

When I tried to import parallax from 'react-spring/dist/addons' it's throwing me this error. This is my import code

import { ParallaxLayer } from 'react-spring/dist/addons'
import { Spring } from 'react-spring'

[drcmda]

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

[iammarkps]

I think the problem is with NextJS

[iammarkps]

The old error is gone but now its throw this error instead.

global.requestAnimationFrame is not a function

TypeError: global.requestAnimationFrame is not a function
    at requestFrame (/Users/iammark/Projects/openhouse/node_modules/react-spring/dist/web.cjs.js:18:17)
    at Controller.start (/Users/iammark/Projects/openhouse/node_modules/react-spring/dist/web.cjs.js:1542:18)
    at Controller.update (/Users/iammark/Projects/openhouse/node_modules/react-spring/dist/web.cjs.js:1530:47)
    at new Controller (/Users/iammark/Projects/openhouse/node_modules/react-spring/dist/web.cjs.js:1335:10)
    at new Parallax (/Users/iammark/Projects/openhouse/node_modules/react-spring/dist/addons.cjs.js:218:25)
    at processChild (/Users/iammark/Projects/openhouse/node_modules/react-dom/cjs/react-dom-server.node.development.js:2435:14)
    at resolve (/Users/iammark/Projects/openhouse/node_modules/react-dom/cjs/react-dom-server.node.development.js:2401:5)
    at ReactDOMServerRenderer.render (/Users/iammark/Projects/openhouse/node_modules/react-dom/cjs/react-dom-server.node.development.js:2728:22)
    at ReactDOMServerRenderer.read (/Users/iammark/Projects/openhouse/node_modules/react-dom/cjs/react-dom-server.node.development.js:2699:25)
    at renderToString (/Users/iammark/Projects/openhouse/node_modules/react-dom/cjs/react-dom-server.node.development.js:3113:25)
    at renderPage (/Users/iammark/Projects/openhouse/node_modules/next/dist/server/render.js:319:26)
    at Function.getInitialProps (/Users/iammark/Projects/openhouse/.next/server/static/development/pages/_document.js:193:18)
    at _callee$ (/Users/iammark/Projects/openhouse/node_modules/next/dist/lib/utils.js:86:30)
    at tryCatch (/Users/iammark/Projects/openhouse/node_modules/regenerator-runtime/runtime.js:62:40)
    at Generator.invoke [as _invoke] (/Users/iammark/Projects/openhouse/node_modules/regenerator-runtime/runtime.js:288:22)
    at Generator.prototype.(anonymous function) [as next] (/Users/iammark/Projects/openhouse/node_modules/regenerator-runtime/runtime.js:114:21)

[drcmda]

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.

[iammarkps]

@drcmda https://github.com/iammarkps/openhouse This is my repo

[drcmda]

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.

[iammarkps]

NextJS is using babel 7

[iammarkps]

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

[drcmda]

but that was a standard import { ... } from 'react-spring/dist/addons' and the console said 404. Have to admit i'm stumped by this.

[iammarkps]

Oh I thought you use it in browser sorry

[LekoArts]

I'm also experiencing the same issue with Gatsby: https://github.com/LekoArts/gatsby-starter-portfolio-cara/pull/8

You also can see the Netlify build there.

[drcmda]

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

[LekoArts]

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:

Doing a console.log(global) gave me a result with a bunch of key value pairs in it.

global = { requestAnimationFrame: fn => requestAnimationFrame(fn), cancelAnimationFrame: fn => cancelAnimationFrame(fn) }

Putting it where? Placing it in my index.jsx file it tells me that requestAnimationFrame is not defined.

You can try it yourself with the repo though.

[drcmda]

@iammarkps @LekoArts could you try react-spring@6.1.7-beta.0? I am exposing raf and caf as window. ... now. Seems weird but if it fixes it then i'll release a patch later on.

[LekoArts]

I updated, yeah. But window is problematic, too: https://www.gatsbyjs.org/docs/debugging-html-builds/

I got a "window is not defined" error. It would be best to add this check to react-spring, not to my code: https://github.com/LekoArts/gatsby-starter-portfolio-cara/blob/update-spring/src/pages/index.jsx#L17-L22

Because then emotion complains about forwardProp and other stuff.

[drcmda]

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

[LekoArts]

Thanks to @pieh I got it working: https://github.com/LekoArts/gatsby-starter-portfolio-cara/pull/8/commits/eb5037ac39809b2eba5e280c2df93a0d5d25e4c2#diff-9d1d0e7c9aa0b75d4b0245b0e93b4163

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

[drcmda]

Are there any steps i would need to take in order to support SSR? I wasn't aware it would cause problems.

[pieh]

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. requestAnimationFrame) not in component constructor, componentWillMount or render lifecycle methods - componentDidMount is good place for that. Or if you can't refactor it to not call them there you would need guards like typeof window !== `undefined` before using them.

We potentially could create mocks in gatsby so calling browser APIs in SSR doesn't throw errors but is no-op, but this might cause weird side effects, so I feel it's better if we don't do that - it's easier to debug something if it crash with error than if it fails silently

[drcmda]

@pieh I could make them no-ops if global isn't found.

@LekoArts Could you try 6.1.7-beta.1 without the window-checks you have merged? Does it work like that?

[LekoArts]

Errors out with the same one:

  10 | var colorNames = [];
  11 | var requestFrame = global ? function (cb) {
> 12 |   return global.requestAnimationFrame(cb);
     | ^
  13 | } : function () {
  14 |   return null;
  15 | };

  WebpackError: TypeError: global.requestAnimationFrame is not a function

  - web.js:12 ./node_modules/react-spring/dist/web.js.requestFrame
    [lib]/[react-spring]/dist/web.js:12:1

  - web.js:1498 Controller.start
    [lib]/[react-spring]/dist/web.js:1498:1

  - web.js:1486 Controller.update
    [lib]/[react-spring]/dist/web.js:1486:1

  - web.js:1290 new Controller
    [lib]/[react-spring]/dist/web.js:1290:1

  - addons.js:212 new Parallax
    [lib]/[react-spring]/dist/addons.js:212:1

  - bootstrap:18 d
    lib/webpack/bootstrap:18:1

[TrySound]

@drcmda global is not defined in browsers. You should always polyfill it. I don't think requestFrame will be called in SSR so just change global to window.

[TrySound]

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.

[drcmda]

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

[iammarkps]

@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

[Huaoe]

hi, I workaround the issue upgrading to 6.1.7.beta.1 and modifying web.cjs;js

var requestFrame = global ? function (cb) { return typeof window != 'undefined' ? window.requestAnimationFrame(cb) : function () { return null; }; } : function () { return null; }; var cancelFrame = global ? function (cb) { return typeof window != 'undefined' ? window.cancelAnimationFrame(cb) : function () { return null; }; } : function () { return null; };

[drcmda]

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

[Huaoe]

@drcmda I confirm 6.1.7 is fixing TypeError: global.requestAnimationFrame is not a function Thx

[LekoArts]

@drcmda Yeah, works now 👍 Thanks!

[rainstormza]

@drcmda I think this error still happens in Nextjs.

[drcmda]

@rainstormza what does it say?

[rainstormza]

import { Parallax, ParallaxLayer } from "react-spring/dist/addons";

/node_modules/react-spring/dist/addons.js:1
(function (exports, require, module, __filename, __dirname) { import _extends from
'@babel/runtime/helpers/esm/extends';
                                                                     ^^^^^^^^

SyntaxError: Unexpected identifier

@drcmda

I tried to use parallax within nextjs project but when I run nextjs in dev mode it always throws this error.

[drcmda]

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.

[nonfungibletunji]

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

[drcmda]

Which babel version do you run, is this babel latest or still the beta?

[drcmda]

PS. in this issue people are getting the same problem: https://github.com/gatsbyjs/gatsby/issues/7668

And i think it's been because their SSR engine pinned a beta, which is incompatible with babel@stable.

[nonfungibletunji]

Latest On Nov 22, 2018, 2:55 AM -0500, Paul Henschel notifications@github.com, 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 babel@stable. — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or mute the thread.

[nonfungibletunji]

S Tunji Turner @sturner 12:43pm https://unpkg.com/react-spring@6.1.9/dist/addons 3:42pm Looks like it's publishing import/export syntax, node_modules are not touched by Next.js and are marked as externals, the ZEIT Team responded with this update

[nonfungibletunji]

I looked in the nextjs repo dependencies, "babel-core": "7.0.0-bridge.0", is what’s pinned

[djinzbojst]

Any updates on this? Experiencing the same issue when trying to deploy my NextJs app with some react-spring Parallax-components.

[janoist1]

Importing cjs fixed for me: import { Parallax, ParallaxLayer } from 'react-spring/dist/addons.cjs.js'

[djinzbojst]

Awesome, thanks! This did the job for me aswell.

[nonfungibletunji]

  <Parallax pages={3} scrolling={false} horizontal ref={ref => this.parallax = ref}>
    <ParallaxLayer offset={0} speed={0.5}>
      <span onClick={() => this.parallax.scrollTo(1)}>
        Layers can contain anything
      </span>
    </ParallaxLayer>
  </Parallax>
);

keeps giving me the following error: TypeError: undefined is not an object (evaluating '_this.parallax = _ref7')

[ruggedy]

@iammarkps @drcmda is this still an issue or can it be closed?

[JulianJorgensen]

Still seems to be an issue when using with Next.js

[benlonsdale]

I think the issue here is importing from import { ParallaxLayer } from 'react-spring/dist/addons' which has not been run through a transpiler, where import { ParallaxLayer } from 'react-spring/dist/addons.cjs.js has.

When importing from the main module the package.json points to the .cjs. Whether or not this will work will depend on the environment that you are running the code in.

I was having the same error when trying to run tests on the new hooks module but importing from import { useSpring } from 'react-spring/hooks.cjs.js'; fixed the issue

[Powdee]

As the @benlonsdale said. The issue is how we import { ParallaxLayer } from addons's file. Changed my import to import { ParallaxLayer } from 'react-spring/addons.cjs.js' and it fixed the issue. Note that I deleted dist in my import path. Using "react-spring": "^7.2.10"

[dohomi]

I am getting a different error on 8.0.19 with NextJS and Parallax:

TypeError: Cannot read property 'defaultElement' of undefined
Module../node_modules/react-spring/renderprops-addons.cjs.js
./node_modules/react-spring/renderprops-addons.cjs.js:13
  10 | var React = _interopDefault(require('react'));
  11 | var renderprops = require('react-spring/renderprops');
  12 | 
> 13 | var El = renderprops.Globals.defaultElement;

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

Any idea how to solve this?

[cyrus-za]

Getting this error with CRA when running tests. CRA does not use Babel 7 yet. This happens regardless of using cjs or not.

> 4 | import { Parallax, ParallaxLayer } from 'react-spring/dist/addons.cjs'

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). yarn 1.16.0 node 11.14.0

{
    "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() });

[TrySound]

@cyrus-za It does https://github.com/facebook/create-react-app/blob/master/packages/babel-preset-react-app/package.json#L24