存在d.ts文件仍无法找到@handsontable/react声明文件的TS报错问题

问题描述 #

使用npm create vite@latest -- --template react-swc-ts创建Vite+React+TS+SWC项目后，安装handsontable和@handsontable/react，在App.tsx中导入HotTable和registerAllModules时出现TS7016错误：提示找不到@handsontable/react和handsontable/registry的声明文件，尽管对应目录存在index.d.ts，但受package.json的exports配置影响无法解析。

解决方案 #

方法1：切换TypeScript模块解析模式 #

修改tsconfig.json中的moduleResolution配置，从bundler改为node：

{
  "compilerOptions": {
    // 其他配置保持不变
    "moduleResolution": "node"
  }
}

这种方式会让TypeScript采用Node.js的模块解析逻辑，忽略package.json exports配置的限制，直接识别目录中的声明文件。

方法2：手动添加路径映射 #

在tsconfig.json的compilerOptions中添加paths字段，手动指定包对应的声明文件路径：

{
  "compilerOptions": {
    // 其他配置保持不变
    "paths": {
      "@handsontable/react": ["./node_modules/@handsontable/react/dist/index.d.ts"],
      "handsontable/registry": ["./node_modules/handsontable/dist/registry.d.ts"]
    }
  }
}

此方法通过强制映射包路径到具体的声明文件，绕开exports配置的限制。

方法3：升级Handsontable版本 #

部分旧版本的Handsontable存在package.json exports配置未包含类型文件的问题，执行以下命令升级到最新版本：

npm update handsontable @handsontable/react

新版本可能已修复该配置问题，无需额外修改即可正常识别声明文件。

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