TypeScript项目导入chartjs-plugin-stacked100无法解析模块路径如何解决？

报错原因 #

• 你编写的global.d.ts存在重复模块定义，且导出类型和插件实际的默认导出规则不匹配，插件使用的是默认导出而非命名导出ChartjsPluginStacked100函数。
• 你的tsconfig.json未将src下的global.d.ts纳入类型声明检索范围，导致TS无法识别你自定义的声明。
• eslint的导入解析规则未配置.d.ts文件识别能力，或是eslint-import-resolver-typescript配置不完整，导致eslint判定路径无法解析。

解决步骤 #

1. 修正global.d.ts类型声明 #

删除原有内容，替换为适配插件默认导出规则的声明：

declare module 'chartjs-plugin-stacked100' {
  import type { Plugin } from 'chart.js';
  const Stacked100Plugin: Plugin;
  export default Stacked100Plugin;
}

2. 确保tsconfig包含声明文件 #

检查tsconfig.json的include字段，确认覆盖了自定义声明文件，示例配置如下：

{
  "compilerOptions": {
    // 保留你原有的其他配置
    "typeRoots": ["node_modules/@types", "src"]
  },
  "include": ["src/**/*", "src/global.d.ts"]
}

如果仍识别不到，可在src下新建types目录存放global.d.ts，同时将src/types加入typeRoots配置即可。

3. 补全eslint导入解析配置 #

检查.eslintrc.json，确保import/resolver的typescript配置已开启，示例如下：

{
  "settings": {
    "import/resolver": {
      "typescript": {
        "alwaysTryTypes": true,
        "project": "./tsconfig.json"
      }
    }
  }
}

4. 清除缓存重启服务 #

所有配置修改完成后，重启编辑器，再重启本地开发服务清除缓存，即可解决导入报错。

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