Unable to set a breakpoint in code in Chrome/Firefox

[vitalyb-qwilt]

Have you read the Contributing Guidelines on issues?

• [X] I have read the Contributing Guidelines on issues.

Prerequisites

• [X] I'm using the latest version of Docusaurus.
• [X] I have tried the npm run clear or yarn clear command.
• [X] I have read the console error message carefully (if applicable).
• [X] I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• [X] I have tried creating a repro with https://new.docusaurus.io.

Description

I am unable to set breakpoint in tsx files in neither Chrome or Firefox.

The issue reproduces in a fresh Docusaurus install, both locally and in playground. You can see it in the links:

https://codesandbox.io/p/devbox/affectionate-beaver-qdeo7?privacy=public https://qdeo7-3000.csb.app/

The lines of the component are grey and I am unable to set a breakpoint. If I try to use the "debugger" command, I get the minified version. Image below.

Reproducible demo

https://codesandbox.io/p/devbox/affectionate-beaver-qdeo7?privacy=public

Steps to reproduce

1. npm start
2. Navigate to a component, e.g. src/pages/index.tsx
3. Try to set a breakpoint

Expected behavior

Breakdown should be set

Actual behavior

Breakdown should is not set

Your environment

• Docusaurus version used: 3.3.2
• Environment name and version: Reproduces in latest Chrome/Arc and Firefox
• Operating system and version (e.g. Ubuntu 20.04.2 LTS): MacOS 14.4.1 (23E224)

Self-service

• [ ] I'd be willing to fix this bug myself.