question-mark
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.

SourceMaps don't bind on latest next.js version server side (Docker)

See original GitHub issue

Describe the bug Next.js now uses eval-source-map from version 9 onwards. It looks like eval-source-map generates webpack-internal:///./ references.

I added the settings below but it makes no difference:

      "sourceMapPathOverrides": {
        "webpack-internal:///./": "${workspaceFolder}/"
      }

I wonder if https://github.com/microsoft/vscode-js-debug/blob/e2191de3d65c8e90be183bd545ec8441972566a2/src/targets/browser/browserPathResolver.ts#L111-L113 has anything to do with it?

Should webpack-internal:///./ be added to this list? https://github.com/microsoft/vscode-js-debug/blob/4d7737fbb65cf6485bd333e03f5319ceafaa797e/src/configuration.ts#L931-L939

To Reproduce Steps to reproduce the behavior:

  1. Clone https://github.com/jasonwilliams/nextjs9-typescript-server-vscode-example
  2. yarn install
  3. docker-composer up
  4. Launch -> launch server (Docker)
  5. set a breakpoint in pages/index.tsx

Log File

VS Code Version: 1.51

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:15 (15 by maintainers)

github_iconTop GitHub Comments

1reaction
connor4312commented, Dec 9, 2020

Actually, the scenario is narrower than I thought. For data URI sourcemaps, we use the path of the compiled file to see if we should resolve it. I put in a fix to remove the “protocol”, so webpack-internal:///./pages/index.tsx will turn into /pages/index.tsx for matching purposes, which the default glob is capable of dealing with. So I put in a targeted fix.

0reactions
connor4312commented, Feb 1, 2021

@roblourens make sure to remove the sourceMapPathOverrides section as well – apologies for not posting easy verification steps in a long thread:

  1. Follow these instructions: https://github.com/microsoft/vscode-js-debug/issues/854#issue-740838182
  2. But before step 4, remove these lines https://github.com/jasonwilliams/nextjs9-typescript-server-vscode-example/blob/f404275fb07599b4a8e4135e10d2a8d0fc10163d/.vscode/launch.json#L22-L24

Closing for re-verification attempt

Read more comments on GitHub >

github_iconTop Results From Across the Web

Advanced Features: Debugging - Next.js
This documentation explains how you can debug your Next.js frontend and backend code with full source maps support using either the VS Code...
Read more >
Debugging Next.js Applications - elliott.dev
Next.js has source maps enabled by default in dev mode, so you'll see your uncompiled source code, and you can navigate to a...
Read more >
unable to debug Next.js app using visual code - Stack Overflow
js app in visual studio code using google chrome. Below is my launch.json file code : { "version": "0.2.0", "configurations ...
Read more >
Debugging Node.js projects with TypeScript and VS Code
While they are also applicable to both client-side & server-side projects, ... Sourcemaps are used in JavaScript & other languages ...
Read more >
TypeScript debugging with Visual Studio Code
TypeScript debugging supports JavaScript source maps. ... If generated (transpiled) JavaScript files do not live next to their ... Client-side debugging.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found