Next.js项目调试：如何打包依赖模块的TypeScript文件

问题根源分析 #

1. 本地依赖@project/common未加载TS源码：你的@project/common包的package.json里指定了main: "build/index.js"和files: ["build/*"]，这意味着Next.js默认会直接使用编译后的JS文件，不会去解析TS源码，自然无法生成对应TS的source map。
2. Pages文件的Source Map配置冲突：Next.js 6.x搭配@zeit/next-typescript时，你当前的webpack devtool配置可能和插件的默认处理逻辑冲突，导致pages目录下的TSX文件仅保留编译后的JS，没有正确关联TS源码的映射关系。

分步解决方案 #

1. 强制Next.js加载本地依赖的TS源码

修改你的next.config.js，通过resolve.alias让开发环境下直接指向@project/common的TS源码目录（假设common库源码在../common/src，请根据实际路径调整）：

const withTypescript = require('@zeit/next-typescript')
const path = require('path');

module.exports = withTypescript({
  poweredByHeader: false,
  webpack: (config, {dev}) => {
    if (dev) {
      // 替换为更适合开发的source map类型
      config.devtool = 'eval-source-map';
      config.resolve.extensions = ['.ts', '.tsx', '.js', '.jsx', '.json'];
      config.output.sourceMapFilename = "[name].js.map";
      
      // 配置别名，让@project/common指向源码而非编译后的build文件
      config.resolve.alias['@project/common'] = path.resolve(__dirname, '../common/src');
    }
    return config;
  },
  distDir: '../dist',
});

同时检查@project/common的tsconfig.json，确保inlineSourceMap: true已开启（你当前的配置已经满足），开发环境下可以临时将noEmit设为false，让webpack能正确处理源码编译。

2. 修复Pages文件的Source Map关联

调整主项目的tsconfig.json，添加include字段确保pages目录被TS编译器识别：

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["es5", "es2015.promise", "dom"],
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "removeComments": true,
    "preserveConstEnums": true,
    "inlineSourceMap": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "noEmit": true,
    "allowJs": true,
    "jsx": "react",
    "baseUrl": ".",
    "skipLibCheck": true,
    "paths": { "@project/*": ["./node_modules"] }
  },
  "include": ["pages/**/*", "src/**/*"]
}

另外，eval-source-map相比你之前用的inline-source-map更适合开发环境，能更清晰地保留TS源码和编译后JS的映射关系。

3. 验证调试效果

• 重启Next.js开发服务器（npm run dev）。
• 打开Chrome DevTools的Sources面板，在webpack://目录下就能找到你的TS源码（包括pages/index.tsx和@project/common下的TS文件）。
• 设置断点后，即可直接调试TS代码。

额外注意事项 #

• 生产环境下记得移除resolve.alias配置，继续使用@project/common的build版本，避免编译时间过长。
• Next.js 6.x版本较老旧，后续建议升级到新版本（比如Next.js 13+），新版本对TypeScript的原生支持更完善，调试体验也会更好。

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