Next.js第三方包导出TS类型报无对应loader错误如何解决

问题根因 #

Next.js 默认不对node_modules目录内的文件执行TypeScript语法转译，当第三方包入口直接指向未编译的TS源文件、并使用export type这类TS专属类型导出语法时，webpack会按照普通JavaScript规则解析文件，遇到type关键字就会触发模块解析报错。

可行修复方案 #

按优先级从高到低尝试：

方案1：使用官方内置的包转译配置（推荐，Next.js 13.1+ 适用） #

这是Next.js官方原生提供的能力，不需要额外安装第三方依赖：

• 打开项目根目录的next.config.js（或next.config.mjs）配置文件
• 添加transpilePackages配置项，填入触发报错的第三方包名称，示例：

/** @type {import('next').NextConfig} */
const nextConfig = {
  // 替换成实际触发报错的第三方包包名
  transpilePackages: ['触发报错的第三方包包名'],
  // 其余原有配置保持不变
}

module.exports = nextConfig

• 保存配置后，彻底停止当前开发服务，重新执行npm run dev启动，或重新执行构建命令即可生效。该配置会让Next.js用内置的SWC加载器处理指定包内的TS/TSX文件，自动识别转译类型导出语法。

方案2：使用转译插件兼容低版本Next.js（13.1以下版本适用） #

如果你的Next.js版本低于13.1，没有内置transpilePackages配置，可以用官方维护的转译插件处理：

• 先安装开发依赖：

npm install next-transpile-modules --save-dev

• 修改next.config.js配置：

// 括号内填入触发报错的第三方包包名
const withTranspileModules = require('next-transpile-modules')(['触发报错的第三方包包名']);

/** @type {import('next').NextConfig} */
const nextConfig = {
  // 其余原有配置保持不变
}

module.exports = withTranspileModules(nextConfig);

• 保存后重启开发服务/重新构建即可。

方案3：临时通过别名指向包的编译产物 #

如果上述配置生效后仍然报错，大概率是第三方包本身的入口配置错误，没有将package.json的入口字段指向编译后的JS产物，而是直接指向了TS源码，可以临时通过webpack别名绕过问题：

• 修改next.config.js，添加webpack解析别名配置，示例：

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config) => {
    config.resolve.alias['触发报错的第三方包包名'] = require.resolve('触发报错的第三方包包名/dist/index.js')
    return config
  },
  // 其余原有配置保持不变
}

module.exports = nextConfig

注意：这是临时兼容方案，使用后建议给对应第三方包提交Issue，提醒维护者修正包的入口文件配置，不要长期依赖别名配置。

避坑提示 #

不要直接修改node_modules目录下的第三方包源码，重新安装依赖后所有修改都会丢失，优先使用上述配置方案解决问题。

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