Breakpoints showing "Unbound breakpoint" in VS Code when debugging React app

[muwazakmal]

I am trying to debug a React application in VS Code, but the breakpoints are not binding correctly.

When I set a breakpoint in my source file, VS Code shows "Unbound breakpoint" and displays the following message:

We couldn't find a corresponding source location, and didn't find any source with the name Api_Call.js.

Project Details:

• Framework: React
• Start command: npm start
• File where breakpoint is set: src/CONNECTION/Api_Call.js
• OS: Windows
• Editor: VS Code

Current launch.json configuration:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Chrome",
      "request": "launch",
      "type": "chrome",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}"
    },        
  ]
}

<img width="792" height="188" alt="Image" src="https://github.com/user-attachments/assets/2b98fb0d-b629-49cb-8f40-6c90ad80fd0f" />

Issue:
VS Code cannot map the running code in the browser to the local source file, and the breakpoint remains unbound.

Steps to Reproduce:

1. Start the React application using npm start.
2. Launch the debugger in VS Code.
3. Set a breakpoint in Api_Call.js.
4. Breakpoint appears hollow and shows "Unbound breakpoint".

Expected Behavior:
Breakpoints should bind correctly and pause execution when the code is hit.

Actual Behavior:
Breakpoints remain unbound and the debugger does not stop.

[connor4312]

Please include the log file using the steps in the issue template