Next.js应用导入node_modules内.ts类型文件编译报错该如何解决？

Next.js 默认的Webpack编译规则会排除全部node_modules路径下的文件，你在tsconfig.json中添加的include配置仅作用于TypeScript类型检查阶段，不会修改Webpack的编译范围，因此node_modules/.workspace下的TS文件包含的interface等TS专属语法未被编译，直接抛出解析错误。

方案1：Next.js 13.1及以上版本（推荐） #

直接在next.config.js中添加transpilePackages配置，指定需要额外编译的node_modules模块即可：

const { i18n } = require('./next-i18next.config');

module.exports = {
  i18n,
  transpilePackages: ['.workspace']
};

方案2：Next.js 13.1以下版本 #

需要借助第三方包next-transpile-modules实现相同效果：

1. 安装依赖

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

2. 修改next.config.js配置

const withTM = require('next-transpile-modules')(['.workspace']);
const { i18n } = require('./next-i18next.config');

module.exports = withTM({
  i18n
});

• 检查导出路径：你当前DTOs文件中的导出语句export * from '.workspace/dtos';，如果是同级目录引用建议补全相对路径前缀，改为export * from './.workspace/dtos';避免路径解析异常
• 如果.workspace下还有其他TS文件依赖，可以将tsconfig.json的include规则调整为"node_modules/.workspace/**/*.ts"，覆盖所有相关TS文件避免类型报错

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