pathMappings don't work correctly with custom webRoot

[thiras]

trafficstars

Hello,

I have a repository that contains two different node.js projects managed by lerna on the root of it. Here is the tree output of the repository;

.
├── lerna.json
├── package.json
├── studio
│   ├── config
│   │   └── @sanity
│   │       ├── data-aspects.json
│   │       ├── default-layout.json
│   │       ├── default-login.json
│   │       └── form-builder.json
│   ├── package.json
│   ├── plugins
│   ├── README.md
│   ├── sanity.json
│   ├── schemas
│   │   ├── author.js
│   │   ├── blockContent.js
│   │   ├── category.js
│   │   ├── post.js
│   │   └── schema.js
│   ├── static
│   │   └── favicon.ico
│   ├── tsconfig.json
│   ├── versel.json
│   └── yarn.lock
└── web
    ├── interfaces
    │   └── index.ts
    ├── lib
    │   ├── api.ts
    │   └── sanity.ts
    ├── LICENSE
    ├── next-env.d.ts
    ├── package.json
    ├── package-lock.json
    ├── pages
    │   ├── about.tsx
    │   ├── _app.tsx
    │   ├── _document.tsx
    │   └── index.tsx
    ├── public
    │   └── logo.png
    ├── README.md
    ├── src
    │   ├── AuthorBox.tsx
    │   ├── Copyright.tsx
    │   ├── HeroPost.tsx
    │   ├── Layout.tsx
    │   ├── Link.tsx
    │   ├── Maintenance.tsx
    │   ├── PostCard.tsx
    │   ├── ProTip.tsx
    │   └── theme.tsx
    └── tsconfig.json

The problem occurs when I try to debug the web package. It's next.js application with TypeScript.

I've set webRoot to ${workspaceFolder}/web/ as the documentation suggests. At this point according to the documentation, default pathMappings should be added according to this webRoot. But instead, they don't.

After setting the webRoot and start the debugging process, the extension throws a question about missing pathMapping as soon as you want to set a breakpoint. Here is the screenshot of the question;

After accepting that question and restarting the debugger everything works at first sight. It catches all the breakpoints and pauses the process when hits them as expected.

But as soon as starting to run the program one or a few steps into (F11 shortcut) further, error messages start to appears.

Here are the example messages of missing source file errors;

Could not load source '_n_e/node_modules/@material-ui/core/esm/styles/index.js': Failed sourceRequest: the requested source can't be found.

After a few more steps I again get the error;

Could not load source '_n_e/node_modules/@material-ui/core/esm/styles/makeStyles.js': Failed sourceRequest: the requested source can't be found.

This error occurs when the step is on source codes from the node_modules and .next folder.

This is my VSCode debugging configuration. I've marked the section added after accepting the auto-mapping question. There is clearly something wrong here;

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "firefox",
      "request": "launch",
      "name": "Next: Firefox",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/web/",
      // This pathMappings has added after question accepted
      "pathMappings": [
        {
          "url": "webpack://_n_e/src",
          "path": "${workspaceFolder}/web/src"
        }
      ]
    },
    {
      "type": "node",
      "request": "launch",
      "name": "Next: Node",
      "runtimeExecutable": "npm",
      "args": [
        "run",
        "debug"
      ],
      "port": 9229,
      "console": "integratedTerminal",
      "cwd": "${workspaceFolder}/web/"
    }
  ],
  "compounds": [
      {
          "name": "Next: Full",
          "configurations": ["Next: Node", "Next: Firefox"]
      }
  ]
}

[hbenl]

Can you point me to a sample project with which I can reproduce this?

[TriMoon]

@thiras are you still strugling with this? If so:

• Make sure to use pathMappings from the served content's pov.
• Looks like you didn't make use of source-maps :wink:
• If you make use of sourcemaps that point outside the webRoot which serves the generated bundle, which most sourcemaps do because the generated bundle(s) are most likely generated in a different directory. Then you need to map the source dir for the debugger to be able to load the source file(s).
• eg. with this directory structure:

  project root:
  + src
    - some subdirs
  + dist
    app.js <The generated code files>
  

  • You would need webRoot = dist
  • And a pathMappings that maps http://host:port/src/ to the ${workspaceFolder}/src/ directory, so the debugger can find the referenced source from the sourcemap file if they start with ../src/ (Check the generated sourcemap file itself)

something like

,"url": "http://localhost:9229/index.html"
,"webRoot": "${workspaceFolder}/dist/"
,"pathMappings": [
	{
		"url": "http://localhost:9229/src/"
		,"path": "${workspaceFolder}/src/"
	}
	,{
		"url": "http://localhost:9229/"
		,"path": "${workspaceFolder}/dist/"
	}
]

(In this config you could leave out webRoot completely :wink: )