如何安装与React ^17.0.2兼容的react-three/fiber及drei版本

@react-three/fiber 从8.0版本开始强依赖React 18的并发渲染特性，@react-three/drei 从9.0版本开始同步要求React 18环境，要在不改动现有React 17.0.2版本的前提下使用这两个库，直接安装两个库的React17兼容终版即可，不会影响项目内其他依赖。

具体安装命令 #

根据你使用的包管理器执行对应命令，安装时不会强制升级react、react-dom：

• npm用户执行：
  npm install @react-three/fiber@^7.0.26 @react-three/drei@^8.20.2
• yarn用户执行：
  yarn add @react-three/fiber@^7.0.26 @react-three/drei@^8.20.2
• pnpm用户执行：
  pnpm add @react-three/fiber@^7.0.26 @react-three/drei@^8.20.2

如果安装过程中出现peer dependency相关警告，npm用户可追加--legacy-peer-deps参数跳过校验，不影响实际运行。

安装后校验 #

安装完成后打开项目的package.json确认依赖版本符合要求：

• react、react-dom保持原有^17.0.2版本，无自动升级
• @react-three/fiber版本处于7.x区间
• @react-three/drei版本处于8.x区间

注意事项 #

• 上述两个版本是官方维护的、适配React17的最终稳定版，不要尝试安装更高主版本号的包，高版本强依赖React18 API，强制安装会出现钩子报错、渲染异常等问题
• 7.x版本的@react-three/fiber、8.x版本的@react-three/drei和高版本API存在少量差异，参考对应版本的接口说明编写代码即可，不要直接照搬React18环境下的高版本示例代码

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