React-spring: Webpack complains when using useSpring

[dbrrt]

Hello,

I've got the following error message when I'm using useSpring function trying to render a 3D animated card : "Uncaught TypeError: react__WEBPACK_IMPORTED_MODULE_4___default.a.useState is not a function"

import * as React from 'react'
const { PureComponent, Fragment }  = React
import * as ReactSpring from 'react-spring'
const animated = ReactSpring['animated']
const useSpring = ReactSpring['useSpring']

const calc = (x, y) => [-(y - window.innerHeight / 2) / 20, (x - window.innerWidth / 2) / 20, 1.1]
const trans = (x, y, s) => `perspective(600px) rotateX(${x}deg) rotateY(${y}deg) scale(${s})`


export class CardAnimated extends PureComponent {
  render = () => {
    const [props, set] = useSpring({ xys: [0, 0, 1], config: { mass: 5, tension: 350, friction: 40 } })
    return (
      <animated.div
        onMouseMove={({ clientX: x, clientY: y }) => set({ xys: calc(x, y) })}
        onMouseLeave={() => set({ xys: [0, 0, 1] })}
        style={{ transform: props.xys.interpolate(trans) }}
      />
    )
  }
}

I got the same error in browser, within my app and storybook. Is there anything I'm doing wrong or a specific parameter I should add in my tsconfig.json?

Thanks in advance,

[drcmda]

You need react alpha for this, and it looks like you're pulling from the UMD build, is there a reason for it? It should be import { useSpring, animated } from 'react-spring'. A live example is here: https://codesandbox.io/embed/j1zol1nrq3

[dbrrt]

My App is using TypeScript, and it doesn't work with import { useSpring, animated } from 'react-spring'

[drcmda]

That's strange, any message or error you get then? There were a couple of recent PR's i have merged but haven't gotten to releasing it yet - maybe it's already fixed.

[dbrrt]

I've got this error when I'm trying to destructure : ERROR in [at-loader] ./src/components/gui/AppCardAnimated/index.tsx:4:19 TS2339: Property 'useSpring' does not exist on type 'typeof import("/Users/david/XXXXXXXXX/node_modules/react-spring/index")'.

Otherwise, upgrading to latest React version (16.7.0-alpha.0) solve the original problem

[drcmda]

maybe something got mixed up, we're developing hooks on master currently. Just checked the latest build, it's def available under the default export now.

[marqpdx]

i know i'm late to the part, but i got this working by changing:
import { useSpring, animated } from 'react-spring'
to
import { animated, useSpring } from 'react-spring/hooks.js'

just an fyi.

[mrpeski]

Hi,
For versions 8+, consider installing it's peer dependencies.

"peerDependencies": {
    "prop-types": "15.x.x",
    "react": ">= 16.8.0",
    "react-dom": ">= 16.8.0"
  }

This worked for me.