react-spring: react-spring v6 importing parallax not working

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'

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 3
Comments: 52 (19 by maintainers)

Commits related to this issue

fixes #278 & #306 — committed to pmndrs/react-spring by drcmda 6 years ago
fixes #278 & #306 — committed to szjemljanoj/react-spring by drcmda 6 years ago
Update Parallax import as per https://github.com/pmndrs/react-spring/issues/278 — committed to 4Ply/26hardekool.party-web by 4Ply 2 years ago

Most upvoted comments

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

JulianJorgensen on Jan 4, 2019

I caught an error ‘Parallax’ is not exported from ‘react-spring’ and the simple solution was to update import string to import {Parallax, ParallaxLayer} from 'react-spring/renderprops-addons'.

fitwist on Jul 19, 2019

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?

dohomi on Apr 3, 2019

@drcmda I think this error still happens in Nextjs.

rainstormza on Nov 17, 2018

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

janoist1 on Dec 4, 2018

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

drcmda on Nov 1, 2018

I think the problem is with NextJS

iammarkps on Oct 26, 2018