Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

default source map path overrides do not work with webpack for scoped packages

See original GitHub issue

Describe the bug Breakpoints are unbound for webpack projects that use a npm scoped package in their package name.

To Reproduce Steps to reproduce the behavior:

Clone https://github.com/GuiSim/vscode-js-debug-bug-report
Run npm install
Open the project with VSCode
Go to the Run and Debug tab
Launch the Next.js: debug server side configuration
Go to http://localhost:3000/api/hello

The debugger; breakpoint will be hit in the hello.js file. However, the file name will be your/work/dir/thisshouldnotbehere/pages/api/hello.js instead of the expected your/work/dir/pages/api/hello.js

Note that if you put a breakpoint in the original file (your/work/dir/pages/api/hello.js) it will be unbound.

You can then apply one of the workarounds below to see that it solves this problem.

Workaround In your launch.config, add the following source map path override:

      "sourceMapPathOverrides": {
        "webpack://@PREFIX/PACKAGE/*": "${workspaceFolder}/*",
      }

where @PREFIX/PACKAGE is your package name. For example, if in your package.json you have configured your package name to be @test/thisshouldnotbehere, your launch.config should include this:

      "sourceMapPathOverrides": {
        "webpack://@test/thisshouldnotbehere/*": "${workspaceFolder}/*",
      }

Rename your package so its name does not include a slash (/).

Additional comments: My understanding is that the Regexes defined in https://github.com/microsoft/vscode-js-debug/blob/4d7737fbb65cf6485bd333e03f5319ceafaa797e/src/configuration.ts#L931-L939 do not correctly match package names that include a slash (/).

I expect a simple fix would be to add a regex that understands scoped packages.

VS Code Version: Version: 1.67.2 Commit: c3511e6c69bb39013c4a4b7b9566ec1ca73fc4d5 Date: 2022-05-17T18:20:57.384Z Electron: 17.4.1 Chromium: 98.0.4758.141 Node.js: 16.13.0 V8: 9.8.177.13-electron.0 OS: Darwin x64 21.3.0

Issue Analytics

State:
Created a year ago
Reactions:3
Comments:6 (2 by maintainers)

Top GitHub Comments

6reactions

connor4312commented, Jun 6, 2022

Thanks for the nice bug report and reproduction. Every day I wake up and wonder, “Will this by the day I find another fun sourcemap path behavior?” and today was that day.

0reactions

GuiSimcommented, Jul 5, 2022

@aeschli sorry, the repro steps were off. The URL you should navigate to is http://localhost:3000/api/hello and not http://localhost:3000/api/hello.js

I have amended the above instructions. My apologies for the typo.

Top Results From Across the Web

Externals - webpack

It will override the default external library type specified in the externalsType option. For example, if the external library is a CommonJS module,...

expose-loader - webpack

By default loader does not override the existing value in the global object, because it is unsafe. In development mode, we throw an...

file-loader - webpack - JS.ORG

Specifies a custom function to post-process the generated public path. This can be used to prepend or append dynamic global variables that are...

Module Federation - webpack

Control from consumer to container. Overriding modules is a one-directional operation. · Concept should be environment-independent. Usable in web, Node.

style-loader - webpack

Source maps do not work. component.js import "./styles.css";. component-with-css-modules.js import styles from "./styles.css"; const divElement = document.