React-spring: Uncaught TypeError: entry.interpolation.calc is not a function when I try to use transition with left prop and mix numbers and strings

[capaj]

I tried animating left prop in the transition page example: https://codesandbox.io/s/nk219j7pl4
instead of translate3d and I got this typeError:

Uncaught TypeError: entry.interpolation.calc is not a function
    at eval (nk219j7pl4.codesandbox.io/node_modules/react-spring/web.cjs.js:1388)
    at Array.reduce (<anonymous>)
    at Controller.update (nk219j7pl4.codesandbox.io/node_modules/react-spring/web.cjs.js:1368)
    at Spring.render (nk219j7pl4.codesandbox.io/node_modules/react-spring/web.cjs.js:1800)
    at finishClassComponent (nk219j7pl4.codesandbox.io/node_modules/react-dom/cjs/react-dom.development.js:14301)
    at updateClassComponent (nk219j7pl4.codesandbox.io/node_modules/react-dom/cjs/react-dom.development.js:14264)
    at beginWork (nk219j7pl4.codesandbox.io/node_modules/react-dom/cjs/react-dom.development.js:15082)
    at performUnitOfWork (nk219j7pl4.codesandbox.io/node_modules/react-dom/cjs/react-dom.development.js:17820)
    at workLoop (nk219j7pl4.codesandbox.io/node_modules/react-dom/cjs/react-dom.development.js:17860)
    at HTMLUnknownElement.callCallback (nk219j7pl4.codesandbox.io/node_modules/react-dom/cjs/react-dom.development.js:149)
    at Object.invokeGuardedCallbackDev (nk219j7pl4.codesandbox.io/node_modules/react-dom/cjs/react-dom.development.js:199)
    at invokeGuardedCallback (nk219j7pl4.codesandbox.io/node_modules/react-dom/cjs/react-dom.development.js:256)
    at replayUnitOfWork (nk219j7pl4.codesandbox.io/node_modules/react-dom/cjs/react-dom.development.js:17107)
    at renderRoot (nk219j7pl4.codesandbox.io/node_modules/react-dom/cjs/react-dom.development.js:17979)
    at performWorkOnRoot (nk219j7pl4.codesandbox.io/node_modules/react-dom/cjs/react-dom.development.js:18837)
    at performWork (nk219j7pl4.codesandbox.io/node_modules/react-dom/cjs/react-dom.development.js:18749)
    at performSyncWork (nk219j7pl4.codesandbox.io/node_modules/react-dom/cjs/react-dom.development.js:18723)
    at interactiveUpdates$1 (nk219j7pl4.codesandbox.io/node_modules/react-dom/cjs/react-dom.development.js:18992)
    at interactiveUpdates (nk219j7pl4.codesandbox.io/node_modules/react-dom/cjs/react-dom.development.js:2169)
    at dispatchInteractiveEvent (nk219j7pl4.codesandbox.io/node_modules/react-dom/cjs/react-dom.development.js:4876)

Do all those values need to be strings?

It seems so, because when I change the 0 to '0'it works.

Is this mentioned somewhere in the docs?
Maybe this could be handled by react-spring without throwing an error?

[drcmda]

Yep, the format has to match between values. Either you use numbers and interpolate in the view, or you interpolate straight up. This could theoretically be fixed using injects (like auto) but with hooks on the horizon I’m not sure if it’s worth the trouble since measuring out stuff explicitly in userland will be so easy.

I’ll add a note to the docs.

[capaj]

Maybe adding a custom error message would be helpful-I imagine a lot of react folks are used to using css properties interchangeably between strings and numbers so this could surprise some of them. I'll close this and I'll try to open a PR with a custom error message.