React Three Fiber引入组件编译失败：@react-spring模块解析错误

问题根源 #

这个错误是因为@react-spring相关依赖版本不兼容，或者webpack未配置无扩展名模块的解析规则——@react-three/drei依赖的@react-spring内部引用了不带扩展名的文件，导致webpack无法找到对应模块。

修复方法 #

• 统一@react-spring版本
  先卸载现有相关包，重新安装稳定匹配的版本：

  npm uninstall @react-spring/core @react-spring/three
  npm install @react-spring/core@^9.7.3 @react-spring/three@^9.7.3
  

• 调整webpack解析配置
  如果是自定义webpack项目，在webpack.config.js里确保resolve.extensions包含常用扩展名：

  module.exports = {
    resolve: {
      extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'],
    },
  };
  

  使用Create React App的话，要么升级到最新版CRA（默认支持无扩展名解析），要么用react-app-rewired修改配置。

• 清除缓存重装依赖

  rm -rf node_modules package-lock.json
  npm install
  npm run build
  

• 降级@react-three/drei版本
  要是上面的方法都没用，试试换个兼容性更好的drei版本：

  npm uninstall @react-three/drei
  npm install @react-three/drei@^9.92.0
  

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