VS Code调试Next.js时触发/.next编译文件隐形断点问题

我是NextJS新手，目前遇到了影响工作流的问题。已按照官方说明配置了launch.json，启动调试后能正常命中TypeScript文件中设置的预期断点，但每次启动应用时，VS Code都会触发/.next文件夹内编译文件中不存在的断点，截图显示它将该断点误判为authProvider.tsx文件中的断点。

以下是我的tsconfig.json配置：

{
  "compilerOptions": {
    "target": "es2017",
    "module": "commonjs",
    "sourceMap": true,
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "strictPropertyInitialization": false, /* Enable strict checking of property initialization in classes. */// "noImplicitThis": true,                /* Raise error on 'this' expressions with an implied 'any' type. */
    "esModuleInterop": true,
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve"
  },
  "include": [
    "src/**/*.ts"
    /* Include every ts file in source folder */
  ],
  "exclude": [
    "node_modules"
    /* exclude everything in  node_modules */
  ]
}

我的launch配置与官方示例完全一致，请问出现该问题的原因是什么，如何解决？

原因分析 #

1. tsconfig的include范围不全：你的include只覆盖了.ts文件，但authProvider.tsx是TSX文件，未被纳入编译范围，导致source map生成时映射关系出错，调试器无法正确关联源码与编译产物。
2. 旧编译产物的source map缓存：/.next文件夹中残留的旧编译文件和source map可能与当前源码不匹配，调试器加载了过期的映射信息，触发不存在的断点。
3. source map路径映射不明确：Next.js编译后的文件路径与源码路径的映射关系未明确指定，调试器误将编译文件中的位置关联到了错误的源码文件。

解决步骤 #

• 修正tsconfig的include范围：将include数组补充.tsx文件，确保所有源码文件都被纳入编译：

  "include": [
    "src/**/*.ts",
    "src/**/*.tsx"
  ]
  

• 清理编译产物与断点缓存：
  1. 删除项目根目录下的.next文件夹；
  2. 在VS Code的「运行和调试」面板中点击「移除所有断点」，再手动检查authProvider.tsx是否有隐藏断点；
  3. 重启VS Code，重新启动调试会话。
• 优化launch.json的source map映射：在launch配置中添加sourceMapPathOverrides，强制指定编译文件到源码的路径映射：

  {
    "version": "0.2.0",
    "configurations": [
      {
        "name": "Next.js: debug server-side",
        "type": "node-terminal",
        "request": "launch",
        "command": "npm run dev",
        "sourceMapPathOverrides": {
          "webpack://_N_E/*": "${workspaceFolder}/src/*",
          "webpack:///*": "${workspaceFolder}/*"
        }
      },
      {
        "name": "Next.js: debug client-side",
        "type": "chrome",
        "request": "launch",
        "url": "http://localhost:3000",
        "sourceMapPathOverrides": {
          "webpack://_N_E/*": "${workspaceFolder}/src/*",
          "webpack:///*": "${workspaceFolder}/*"
        }
      }
    ]
  }
  

• 检查VS Code调试设置：打开VS Code的设置（快捷键Ctrl+,），搜索「Debug: Auto Attach」，确保设置为off或仅在需要时启用，避免调试器自动加载无关的source map。

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