NextJS 12 Serverside Debugging Broken in VSCode

[meds]

What version of Next.js are you using?

12.0.3

What version of Node.js are you using?

14.17.3

What browser are you using?

Chrome

What operating system are you using?

Windows 11

How are you deploying your application?

Vercel

Describe the Bug

Using the NextJS full stack config taken from the documentation:

 {
      "name": "Next.js: debug full stack",
      "type": "node-terminal",
      "request": "launch",
      "command": "npm run dev",
      "console": "integratedTerminal",
      "serverReadyAction": {
        "pattern": "started server on .+, url: (https?://.+)",
        "uriFormat": "%s",
        "action": "debugWithChrome"
      }
    }

Breakpoints for /api/ functions are no longer binding in VSCode.

Have also tried the following attach config wich was working in Next 11

{
      "type": "node",
      "request": "attach",
      "name": "Attach Backend",
      "restart": true,
      "sourceMaps": true,
      "skipFiles": [
        "<node_internals>/**"
      ],
      "outFiles": [
        "${workspaceFolder}/.next/server/**/*.js"
      ],
      "port": 9229
    },

The console indicates the debugger did attach:

However breakpoints still fail to bind - with 'Attach Backend' there is no visible breakpoint either.

It appears when using 'Attach Backend' they are binding to a TS file which is somehow transpiled from the source TS file,

Source TS file for above looks like this:

Expected Behavior

Breakpoints should bind on the line numbers they're set on in VSCode

To Reproduce

1) Create a Next12 JS app with typescript (yarn create next-app --typescript)

2) Use the following package.json:

{
  "name": "my-app",
  "private": true,
  "scripts": {
    "dev": "cross-env NODE_OPTIONS='--inspect' next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "12.0.3",
    "react": "17.0.2",
    "cross-env": "7.0.3",
    "react-dom": "17.0.2"
  },
  "devDependencies": {
    "@types/node": "16.11.7",
    "@types/react": "17.0.34",
    "eslint": "7",
    "eslint-config-next": "12.0.3",
    "typescript": "4.4.4"
  }
}

and yarn install

3) Use the following launch config (in .vscode/launch.json):

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Chrome",
            "request": "launch",
            "type": "pwa-chrome",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}",
            "outFiles": [
                "${workspaceFolder}/.next/server/**/*.js"
            ],
        },
        {
            "name": "Attach Chrome",
            "request": "attach",
            "type": "pwa-chrome",
            "port": 9222,
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}",
            "outFiles": [
                "${workspaceFolder}/.next/server/**/*.js"
            ],
        },
        {
            "type": "node",
            "request": "attach",
            "name": "Attach Backend",
            "restart": true,
            "sourceMaps": true,
            "skipFiles": [
                "<node_internals>/**"
            ],
            "outFiles": [
                "${workspaceFolder}/.next/server/**/*.js"
            ],
            "port": 9229
        },
        {
            "name": "Next.js: debug server-side",
            "type": "node-terminal",
            "request": "launch",
            "command": "npm run dev"
        },
        {
            "name": "Next.js: debug client-side",
            "type": "pwa-chrome",
            "request": "launch",
            "url": "http://localhost:3000"
        },
        {
            "name": "Next.js: debug full stack",
            "type": "node-terminal",
            "request": "launch",
            "command": "yarn dev",
            "console": "integratedTerminal",
            "serverReadyAction": {
                "pattern": "started server on .+, url: (https?://.+)",
                "uriFormat": "%s",
                "action": "debugWithChrome"
            }
        }
    ]
}

4A) Run 'yarn dev' in console then through VS Code run 'Attach to Backend', put a breakpoint in 'hello.ts' and observe it either does not bind or dissapears.

5A) Visit localhost:3000/api/hello and observe breakpoint hits in a seperate TS file that looks like a transpiled version of the source

4B) Run 'Next.JS Debug Full Stack' from VSCode, put a breakpint in 'hello.ts' and observe it either does not bind or dissapears

5B) Visit localhost:3000/api/hello and observe no breakpoint is hit

Have attached project with repro case as well if you want an install'n'go example: nextapp.zip

[timneutkens]

Closing this as duplicate of #30435 👍

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.