如何在Codepen中正确配置并使用react-spring？

报错直接原因 #

你当前代码的报错是由变量名大小写不匹配导致：你导入时声明的变量是小写开头的reactSpring，后续解构时使用了大写开头的ReactSpring，两个变量名不一致自然会触发ReactSpring is not defined的报错。

修正当前代码即可解决报错：

import * as ReactSpring from "https://cdn.skypack.dev/react-spring@9.2.6";
const { useSpring, animated, config } = ReactSpring;

Codepen中正确配置react-spring的两种方案 #

方案1：手动导入ES模块 #

操作步骤如下：

• 打开Codepen的设置面板，切换到JavaScript标签
• 将JavaScript预处理器设置为Babel，开启编译支持
• 将「JavaScript Module」选项勾选，启用ES模块加载模式
• 直接在JS面板顶部写入修正后的导入语句即可正常使用

方案2：通过Codepen依赖面板添加（无需手动写import） #

操作步骤如下：

• 打开Codepen的设置面板，切换到JavaScript标签
• 在「Add External Scripts/Pens」搜索框输入react-spring@9.2.6，选择匹配的依赖添加
• 无需额外写import语句，直接在代码中解构使用即可：

const { useSpring, animated, config } = ReactSpring;

注意事项 #

• 提前确保你已经在Codepen中配置了react和react-dom依赖，且React版本≥16.8（支持Hooks），和react-spring版本兼容
• 如果需要使用react-spring的特定子包，调整Skypack导入路径即可

内容的提问来源于stack exchange，提问作者eddie delgatto