React Three（react-three/drei）Text组件TypeScript构建错误：属性缺失

可能的修复方案 #

1. 统一核心依赖版本 #

@react-three/drei、@react-three/fiber、three版本不兼容会导致类型定义冲突。执行命令更新或锁定兼容版本：

npm update @react-three/drei @react-three/fiber three

也可以查看drei的peerDependencies要求，手动在package.json中指定匹配的版本号。

2. 调整TypeScript配置 #

在tsconfig.json中开启skipLibCheck，跳过第三方库的类型校验（不影响业务代码检查）：

{
  "compilerOptions": {
    "skipLibCheck": true
  }
}

3. 手动补充类型声明 #

在项目中创建类型声明文件（比如src/types/drei.d.ts），补充Text组件缺失的属性类型：

import '@react-three/drei';

declare module '@react-three/drei' {
  export interface TextProps extends React.HTMLAttributes<HTMLElement> {
    name?: string;
    type?: string;
    // 按需添加其他报错的属性
  }
}

4. 检查ts-loader配置 #

确保Webpack的ts-loader没有开启过度严格的检查选项：

module.exports = {
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
        options: {
          transpileOnly: false, // 不要长期开启这个选项，会跳过类型检查
        },
      },
    ],
  },
};

5. 清除缓存后重新构建 #

清理各类缓存，避免旧缓存导致的错误：

rm -rf node_modules/.cache
rm -rf dist
npx tsc --clean
npm install

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