react-spring仅在存在react-three-fiber的Canvas组件时生效是什么原因？

排查思路 #

• 检查依赖版本匹配：确认项目中react-spring、@react-spring/web、@react-three/fiber、@react-spring/three的版本互相兼容，若仅安装了@react-spring/three未独立安装@react-spring/web，会出现仅加载three相关组件后react-spring调度才启动的问题。
• 检查导入路径：确认useSpring、animated的导入来源是@react-spring/web而非@react-spring/three或者全局react-spring包，导错包会导致动画依赖three运行时才能执行。
• 检查全局调度配置：排查项目中是否存在手动将react-spring全局调度器绑定到three渲染循环的代码，该配置会导致没有Canvas组件时调度器无运行载体。
• 排查路由懒加载逻辑：若首页配置了懒加载，直接进入博客页时未加载首页的Canvas相关依赖，也会触发该问题，可暂时取消懒加载测试是否复现。

解决方法 #

1. 优先替换导入路径：单独安装web端react-spring依赖npm i @react-spring/web，将代码中导入语句修改为：

import { useSpring, animated } from "@react-spring/web";

2. 清理冗余依赖：如果不需要在非3D场景使用@react-spring/three的能力，直接卸载该包避免导入冲突。
3. 手动启动调度：若上述方法无效，可在博客页根组件中手动启动react-spring的帧调度：

import { useSpring, animated, update } from "@react-spring/web";
import { useEffect } from 'react'

// 在根组件内添加
useEffect(() => {
  let rafId
  function frameLoop() {
    update()
    rafId = requestAnimationFrame(frameLoop)
  }
  frameLoop()
  return () => cancelAnimationFrame(rafId)
}, [])

4. 修复打包配置：排查react-router对应的分包规则，将react-spring相关依赖打包到公共chunk中，避免跨页面依赖缺失。

内容的提问来源于stack exchange，提问作者D. K.