迁移app文件夹至src后VS Code客户端断点失效问题

问题详情 #

• 将app文件夹迁移至src目录后，VS Code断点出现异常：
  • 服务端代码（如API调用）断点可正常工作
  • 客户端代码断点完全失效，但手动添加debugger;语句可正常触发，VS Code断点无法正确映射
• 已在macOS和Windows两台设备测试，问题一致

VS Code断点映射提示 #

✅ 初始设置的断点位置：

D:\Projects\BookingWRT\src\app[lang]\components\booking\ExistingBooking.tsx 第28行第1列

✅ 运行时设置的断点位置：

file:///d:/projects/bookingwrt/src/app/(?:[ 第28行第1列（通过以下正则表达式）

webpack-internal:///(ssr)/./src/app/[lang]/components/booking/ExistingBooking.tsx 第55行第5列

✅ 运行时已确认并调整断点，映射回以下位置：

d:\Projects\BookingWRT\src\app[lang]\components\booking\ExistingBooking.tsx 第28行第19列
若此映射不正确，可能是编译代码与源码不同步。若并非此问题，请提交issue！

调试控制台错误信息 #

Could not read source map for file:///D:/Projects/BookingWRT/node_modules/next/dist/compiled/%40next/react-refresh-utils/dist/runtime.js: ENOENT: no such file or directory, open 'd:\Projects\BookingWRT\node_modules\next\dist\compiled\@next\react-refresh-utils\dist\runtime.js.map'

相关配置文件 #

package.json #

{
  "private": true,
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start -p $PORT"
  },
  "dependencies": {
...
}

tsconfig.json #

{
  "$schema": "https://json.schemastore.org/tsconfig",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": { "@/*": ["./*"] },
    "target": "ESNext",
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "esModuleInterop": true,
    "module": "ESNEXT",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [{ "name": "next" }],
    "sourceMap": true
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

launch.json #

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Next.js: debug server-side",
      "type": "node-terminal",
      "request": "launch",
      "command": "npm run dev"
    },
    {
      "name": "Next.js: debug client-side",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000"
    },
    {
      "name": "Next.js: debug full stack",
      "type": "node-terminal",
      "request": "launch",
      "command": "npm run dev",
      "serverReadyAction": {
        "pattern": "- Local:.+(https?://.+)\",
        "uriFormat": "%s",
        "action": "debugWithChrome"
      }
    }
  ]
}

解决方案 #

1. 指定Next.js源码目录 #

在项目根目录创建next.config.js，添加srcDir配置告知Next.js源码位置：

/** @type {import('next').NextConfig} */
const nextConfig = {
  srcDir: 'src/',
}

module.exports = nextConfig

2. 修正TypeScript路径映射 #

更新tsconfig.json的paths配置，将@/*指向src目录：

"compilerOptions": {
  "baseUrl": ".",
  "paths": { "@/*": ["src/*"] },
  // 其他配置保持不变
}

3. 清理缓存并重启服务 #

• 删除项目根目录下的.next文件夹和node_modules/.cache目录
• 完全关闭VS Code后重新打开
• 重启Next.js开发服务：npm run dev
• 若问题仍存在，尝试重新安装依赖：npm install

4. 修复launch.json正则表达式错误 #

serverReadyAction中的pattern存在语法错误（引号未正确转义），修正为：

"serverReadyAction": {
  "pattern": "- Local:.+(https?://.+)",
  "uriFormat": "%s",
  "action": "debugWithChrome"
}

5. 忽略无关Source Map警告（可选） #

如果react-refresh-utils的source map错误不影响功能，可在客户端调试配置中添加路径覆盖：

{
  "name": "Next.js: debug client-side",
  "type": "chrome",
  "request": "launch",
  "url": "http://localhost:3000",
  "sourceMapPathOverrides": {
    "webpack-internal:///(ssr)/./src/*": "${webRoot}/src/*",
    "file:///D:/Projects/BookingWRT/node_modules/next/dist/compiled/@next/react-refresh-utils/dist/runtime.js": "${webRoot}/node_modules/next/dist/compiled/@next/react-refresh-utils/dist/runtime.js"
  }
}

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