导入node_modules内NPM包时遇到import type语法报错如何解决？

问题根因 #

你遇到的报错是import type语法不兼容导致的，该语法是 TypeScript 3.8 版本新增的专门用于导入类型声明的语法，只要项目编译链路中有任意环节不支持该语法，就会触发编译报错。

可执行的解决方案 #

• 首先确认项目本地安装的 TypeScript 版本符合要求，执行命令查看版本：

  npm list typescript
  

  如果版本低于3.8，执行升级命令即可解决：

  npm install typescript@latest --save-dev
  

• 如果TypeScript版本符合要求，检查编译工具配置：
  1. 用Babel编译TS的项目，需要将@babel/preset-typescript升级到7.9.0及以上版本，同时在babel配置中补充如下参数：

     {
       "presets": [
         ["@babel/preset-typescript", {
           "isTSX": true,
           "allExtensions": true
         }]
       ]
     }
     

  2. 用ts-loader等其他TS编译工具的项目，对应升级loader版本到适配当前TS版本的区间即可。
• 临时兼容方案：如果不想升级核心依赖，可以在项目tsconfig.json的compilerOptions中添加如下配置，编译时会自动将import type转为普通导入处理：

  {
    "compilerOptions": {
      "importsNotUsedAsValues": "remove"
    }
  }
  

报错截图参考 #

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