Expo纯JS项目集成@react-three/fiber出现模块解析错误如何解决

关于Expo支持JS/TS混写的说明 #

Expo完全支持同一项目内JS和TS两种语法混用，无需将现有JS代码全部改造为TS，配置完成后原有JS逻辑、node_modules依赖的编译逻辑完全不受影响。

报错原因 #

你遇到的模块解析失败不是@react-three/fiber的TS代码没有被编译导致，本质是纯JS初始化的Expo项目默认没有添加TS相关的打包解析配置，同时缺少@react-three/fiber原生端运行必要的依赖。

配置步骤 #

• 第一步：安装必要依赖
  执行以下命令安装TypeScript、类型声明包、以及r3f原生运行需要的依赖：

npm install --save-dev typescript @types/react @types/react-native @types/three
npm install three @react-three/fiber expo-gl

• 第二步：添加TypeScript配置
  在项目根目录新建tsconfig.json文件，写入以下基础配置，其中allowJs: true就是开启JS/TS混写的核心配置：

{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "allowJs": true,
    "strict": false,
    "skipLibCheck": true
  }
}

• 第三步：配置Metro打包规则
  在项目根目录新建（如果已有则修改）metro.config.js文件，添加TS/TSX后缀的解析支持：

const { getDefaultConfig } = require('expo/metro-config');

const config = getDefaultConfig(__dirname);

config.resolver.extensions.push('ts', 'tsx');

module.exports = config;

• 第四步：清除缓存重启服务
  执行以下命令启动项目，避免Metro旧缓存导致报错：

npx expo start --clear

额外验证 #

如果配置完成后依然报错，可以检查node_modules/@react-three/fiber/dist/目录下是否存在native.js文件，如果不存在可以删除node_modules和package-lock.json/yarn.lock后重新执行npm install安装依赖。

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