React-Spring项目报错：'useSpring'导出在'react-spring'中未找到

问题原因 #

React-Spring从v9版本开始，将useSpring、useTransition等核心hooks拆分到了子包中，直接从react-spring根包导入会找不到这些导出项，这就是你遇到报错的原因。

解决方法 #

方法1：修正导入路径

将导入代码改为从对应子包引入，web环境下使用react-spring/web：

import { useSpring, animated } from 'react-spring/web'

function App() {
  const props = useSpring({ to: { opacity: 1 }, from: { opacity: 0 } })
  return <animated.div style={props}>I will fade in</animated.div>
}

如果是React Native环境，则导入react-spring/native。

方法2：降级到v8版本

若不想修改导入代码，可以卸载当前版本，安装v8.x版本：

npm uninstall react-spring
npm install react-spring@8.0.27

降级后即可直接使用官网示例中的原始导入方式。

内容的提问来源于stack exchange，提问作者Terry Kang