React-spring: Problems Importing from /renderprops

Created on 28 Feb 2019 · 8Comments · Source: pmndrs/react-spring

I'm getting a weird error.
Only happening when I import from the renderprops versions. { useSpring } from 'react-spring' is working fine. I have a ton of existing transitions that I'd prefer not to re-write all at once.

/Users/scotttolinski/Sites/levelup/node_modules/react-spring/renderprops.js:1
(function (exports, require, module, __filename, __dirname) { import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/esm/objectWithoutPropertiesLoose';
                                                              ^^^^^^

SyntaxError: Unexpected token import
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:616:28)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    at npmRequire (/Users/scotttolinski/Sites/levelup/.meteor/local/build/programs/server/npm-require.js:133:10)
    at Module.useNode (packages/modules-runtime.js:664:18)
    at renderprops.js (packages/modules.js:1290:8)
    at fileEvaluate (packages/modules-runtime.js:336:7)
    at Module.require (packages/modules-runtime.js:238:14)
    at Module.moduleLink [as link] (/Users/scotttolinski/.meteor/packages/modules/.0.13.0.1pfv79d.ujmak++os+web.browser+web.browser.legacy+web.cordova/npm/node_modules/reify/lib/runtime/index.js:38:38)
    at Modals.js (imports/ui/elements/Modals.js:1:1)
    at fileEvaluate (packages/modules-runtime.js:336:7)
    at Module.require (packages/modules-runtime.js:238:14)
    at Module.moduleLink [as link] (/Users/scotttolinski/.meteor/packages/modules/.0.13.0.1pfv79d.ujmak++os+web.browser+web.browser.legacy+web.cordova/npm/node_modules/reify/lib/runtime/index.js:38:38)
    at index.js (imports/ui/elements/index.js:1:1)
    at fileEvaluate (packages/modules-runtime.js:336:7)
    at Module.require (packages/modules-runtime.js:238:14)
    at Module.moduleLink [as link] (/Users/scotttolinski/.meteor/packages/modules/.0.13.0.1pfv79d.ujmak++os+web.browser+web.browser.legacy+web.cordova/npm/node_modules/reify/lib/runtime/index.js:38:38)
    at Header.js (imports/ui/layouts/Header.js:1:1)
    at fileEvaluate (packages/modules-runtime.js:336:7)
    at Module.require (packages/modules-runtime.js:238:14)
    at Module.moduleLink [as link] (/Users/scotttolinski/.meteor/packages/modules/.0.13.0.1pfv79d.ujmak++os+web.browser+web.browser.legacy+web.cordova/npm/node_modules/reify/lib/runtime/index.js:38:38)
    at App.js (imports/ui/layouts/App.js:1:1)
    at fileEvaluate (packages/modules-runtime.js:336:7)
    at Module.require (packages/modules-runtime.js:238:14)
    at Module.moduleLink [as link] (/Users/scotttolinski/.meteor/packages/modules/.0.13.0.1pfv79d.ujmak++os+web.browser+web.browser.legacy+web.cordova/npm/node_modules/reify/lib/runtime/index.js:38:38)
    at ssr-init.js (imports/startup/server/ssr-init.js:1:1)
    at fileEvaluate (packages/modules-runtime.js:336:7)
    at Module.require (packages/modules-runtime.js:238:14)
    at Module.moduleLink [as link] (/Users/scotttolinski/.meteor/packages/modules/.0.13.0.1pfv79d.ujmak++os+web.browser+web.browser.legacy+web.cordova/npm/node_modules/reify/lib/runtime/index.js:38:38)
    at index.js (imports/startup/server/index.js:3:1)
    at fileEvaluate (packages/modules-runtime.js:336:7)
    at Module.require (packages/modules-runtime.js:238:14)
    at require (packages/modules-runtime.js:258:21)
    at /Users/scotttolinski/Sites/levelup/.meteor/local/build/programs/server/app/app.js:34515:15
    at /Users/scotttolinski/Sites/levelup/.meteor/local/build/programs/server/boot.js:411:36
    at Array.forEach (<anonymous>)
    at /Users/scotttolinski/Sites/levelup/.meteor/local/build/programs/server/boot.js:220:19
    at /Users/scotttolinski/Sites/levelup/.meteor/local/build/programs/server/boot.js:471:5
    at Function.run (/Users/scotttolinski/Sites/levelup/.meteor/local/build/programs/server/profile.js:510:12)
    at /Users/scotttolinski/Sites/levelup/.meteor/local/build/programs/server/boot.js:470:11

Source

stolinski

Most helpful comment

could you try a newer version? or use /renderprops.cjs

drcmda on 3 Mar 2019

👍10 ❤4 🎉2

All 8 comments

In environments that don't support the import syntax (node, jest, next, gatsby, etc) use renderprops.cjs for commonjs. This was automatic before because jest/etc pull out the correct export from the "main" field in package.json and they always pick commonjs instead of going for the "module" field like webpack would do. The problem has been that hooks forced us to serve two exports now so it looks like they can't automatically pick cjs any longer since renderprops isn't the default export. :(

This will be fixed at some point but it's too early to tie this lib to react 16.8.x. A PR exists already, though. It would be easy to wrap Spring/Transition/... around the hooks, but i don't know what to do about the regressions (height:auto, mainly), something that isn't supported by hooks.

drcmda on 28 Feb 2019

It's not a matter of supporting import syntax. I'm using imports syntax all
over the application. This is an issue that only appears when importing
from the render props version of react spring specifically.

On Thu, Feb 28, 2019, 4:08 AM Paul Henschel notifications@github.com
wrote:

In environments that don't support the import syntax (node, jest, etc) use
renderprops.cjs for commonjs.

—
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/575#issuecomment-468233271,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAo2x3gFZx2mKcxKAID1Xe86JOVzzzPmks5vR7i5gaJpZM4bVwXJ
.

stolinski on 28 Feb 2019

Node itself cannot handle imports which is what the error-message complains about. Your app is using the import statement, but most likely the imports use require, due to the main field in package.json.
In which environment are you running it?

drcmda on 28 Feb 2019

could you try 8.0.9? it should behave like any other lib now?

drcmda on 28 Feb 2019

I'm facing the same issue, using version 8.0.8 - any idea how to solve this issue?