next.js: [NEXT-517] Breakpoint not getting hit in VSCode with Next.js debugger config

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: win32
      Arch: x64
      Version: Windows 10 Pro
    Binaries:
      Node: 16.14.2
      npm: N/A
      Yarn: N/A
      pnpm: N/A
    Relevant packages:
      next: 13.1.7-canary.7
      eslint-config-next: 13.1.6
      react: 18.2.0
      react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

No response

Link to the code that reproduces this issue

https://github.com/InfiniteLearner/debug_error_next_reproduction

To Reproduce

!!! You should be using node v 16.14.2 !!!

(Because of other constraints I can not update my node version so this is not an option)

Create a new next.js app npx create-next-app@latest Use every default options

Add a new config for debugging in vsCode (.vscode/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": "started server on .+, url: (https?://.+)",
          "uriFormat": "%s",
          "action": "debugWithChrome"
        }
      }
    ]
  }

Create a new async function in index.tsx and call it (with an onClick for example):

async function greeting(){
    console.log("Hello");
    console.log("Goodbye");
  }

...

<p onClick={greeting}></p>
...

Add a new breakpoint in the function.

Run in debug mode (either server-side, client-side or fullstack).

Describe the Bug

On click of the element, the logs will be displayed without being stop. The breakpoints are not getting hit.

It should be noted that breakpoints on the returned component are working fine but none in functions. So if you had a breakpoint on your div (or any other component) it will stop.

Expected Behavior

The breakpoints should get hit and the logs not be displayed.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

_NEXT-517