ts.resolveTypeReferenceDirective非字符串传值构建报错求助

核心错误根因 #

报错里提到的向ts.resolveTypeReferenceDirective传入非字符串值，本质是参与TS编译流程的插件/loader使用了TS4.0之前的旧版解析API签名，和你当前安装的TS4.7版本不兼容，和ts-node、ts-jest等测试、运行时依赖无关，不用在这类包上浪费排查时间。

按优先级排查修复 #

• 第一优先级：修复webpack loader重复匹配问题
  你当前的webpack配置存在明显的规则重叠：

  // 第一条规则已经覆盖了ts/tsx后缀
  { test: /\.(js|jsx|ts|tsx)$/, exclude: /node_modules/, use: 'babel-loader' },
  // 第二条规则又重复匹配ts/tsx后缀
  { test: /\.(ts|tsx)?$/, use: 'ts-loader', exclude: /node_modules/ }
  

  webpack loader执行顺序为从下到上，ts/tsx文件会先经过ts-loader处理，再经过babel-loader二次处理，两个loader传递AST参数时会出现格式错乱，直接触发类型引用解析报错。
  修复方式二选一即可：

  1. 移除单独的ts-loader规则，给babel-loader配置@babel/preset-typescript处理TS语法，这种方式和热更新插件兼容性最好，配置最简单
  2. 收窄babel-loader的匹配范围为/\.(js|jsx)$/，仅让ts-loader处理ts/tsx文件，同时给ts-loader添加transpileOnly: true配置关闭编译阶段的类型检查，额外引入fork-ts-checker-webpack-plugin单独跑类型检查，避免热更新逻辑和类型检查逻辑冲突。

• 第二优先级：修复react-hot-loader版本兼容问题
  你当前使用的react-hot-loader@4.5.3是2018年发布的旧版本，内置的webpack解析补丁完全没适配TS4.x的新API，刚好会触发你遇到的签名不匹配错误。
  修复操作：

  1. 临时修复可将react-hot-loader升级到4.13.1最终稳定版，该版本适配了TS4.x的解析逻辑
  2. 长期建议直接替换为官方维护的@pmmmwh/react-refresh-webpack-plugin，react-hot-loader已停止维护超过3年，不兼容React18及后续版本，尽早替换可以避免后续升级踩坑。

• 第三优先级：清理依赖缓存避免版本冲突
  升级依赖后如果没清理锁文件和构建缓存，可能存在多版本TypeScript/ts-loader嵌套共存的问题，执行以下命令彻底清理后重装：

  # 删除依赖目录和所有锁文件
  rm -rf node_modules package-lock.json yarn.lock pnpm-lock.yaml
  # 清理npm缓存
  npm cache clean --force
  # 重新安装依赖
  npm install
  

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