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.

[slorber]

Thanks for reporting, agree something is going wrong here.

Can you try adding this little plugin and report if it works as you expect?

  plugins: [
    function myDevtoolPlugin() {
      return {
        name: 'my-devtool-plugin',
        configureWebpack() {
          return {
            devtool: 'eval-source-map',
          }
        }
      };
    }
  ],

It works better to me, but is apparently slower too: https://webpack.js.org/configuration/devtool/

The value we use currently is devtool: isProd ? undefined : 'eval-cheap-module-source-map'

[vitalyb-qwilt]

Works great, thanks!

[vitalyb-qwilt]

But with that set, would I now have sourcemaps in production, too? How do I disable it for production?

[slorber]

Thanks for reporting

You can use process.env.NODE_ENV variable in configureWebpack to return a different value in dev only