Processing source-maps of XXX.js took longer than YYY ms so we continued execution without waiting for all the breakpoints

[Edit] This actually happens on a newly created barebones React+Typescript template ViteJS app as well, with zero modifications. Putting a breakpoint in App.tsx makes the VS Code debugger startup unbearably slow. Original post follows:

I'm trying ViteJS (maybe switching away from react-create-app). I created a barebones Vite app using the React Typescript template. Then I pulled in DC.js, Mapbox, and a few other libraries.

Things were going swimmingly for a few hours, and then suddenly (I don't know what I did), launching the VS Code debugger (using pwa-chrome in my launch configuration) started taking forever. That is, it opens up Chrome right away, but it sits there on a blank screen, until my VS Code debug console is done writing the following warnings:

WARNING: Processing source-maps of http://localhost:5173/node_modules/.vite/deps/chunk-YLBYPMLO.js?v=2e2948d4 took longer than 5679.765125 ms so we continued execution without waiting for all the breakpoints for the script to be set.

WARNING: Processing source-maps of http://localhost:5173/node_modules/.vite/deps/crossfilter2.js?v=2e2948d4 took longer than 1000.451959 ms so we continued execution without waiting for all the breakpoints for the script to be set.

WARNING: Processing source-maps of http://localhost:5173/node_modules/.vite/deps/d3.js?v=2e2948d4 took longer than 999.6403339999999 ms so we continued execution without waiting for all the breakpoints for the script to be set.

WARNING: Processing source-maps of http://localhost:5173/node_modules/.vite/deps/dc.js?v=2e2948d4 took longer than 999.535501 ms so we continued execution without waiting for all the breakpoints for the script to be set.

...and more similar warnings for other libraries like React and MapBox.

I've searched for this "continued execution without waiting for all the breakpoints" warning, but the internet seems fairly quiet. It comes from VS Code (see https://github.com/microsoft/vscode-js-debug/blob/main/src/adapter/threads.ts), but I've not seen this warning before using WebPack or other dev-environments. It just came about shortly after switching to ViteJS, which is why I suspect it might be something in my ViteJS set up.

Debugging using the Chrome Devtools instead of VS Code works fine (i.e., launches right away). My muscle memory is with the VS Code debugger, so I'd like to continue to use it, but not if I have to wait 5 seconds every time I launch it.

Any ideas what might cause this?

My ViteJs configuration is bare-bones, it's just what you get when you create a React Typescript app with ViteJS:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
  ],
})

Any help greatly appreciated, thank you!

[EDIT]

I just removed all libraries except for React from my app, and reduced the code to this (used from the ViteJS React Typescript default main.tsx).

export function App() {
    return (
    <div className="App">
      <h1>Testing Testing!</h1>
    </div>
  );
}

That removes most of the warnings about other libraries' sourcemaps, with only these two remaining:

WARNING: Processing source-maps of http://localhost:5173/node_modules/.vite/deps/chunk-YLBYPMLO.js?v=585c1efb took longer than 5728.142083 ms so we continued execution without waiting for all the breakpoints for the script to be set.

WARNING: Processing source-maps of http://localhost:5173/node_modules/.vite/deps/react_jsx-dev-runtime.js?v=585c1efb took longer than 999.2322079999994 ms so we continued execution without waiting for all the breakpoints for the script to be set.

Not sure if that's super helpful, except to indicate that it's not because of me adding DC.js, Mapbox, etc. that this problem is happening for me.

FWIW, I can add "pauseForSourceMap": false to my launch configuration. That removes the problem (debugger launches quickly), except that I land in the built/generated javascript files for breakpoints, and only a few seconds later start being able to step through my actual typescript.

I found this post while looking for the same error showing up on Angular and found a solution here: Why am I suddenly getting "Could not read source map" in VSCode using Angular with NodeJS 17 and above? - Specifically the sourceMapPathOverrides and start script update

What made it work is adding the flag '--host=127.0.0.1' to the start script. E.g. in package.json:

"scripts": {
    "ng": "ng",
    "start": "ng serve --host=127.0.0.1",

My launch json:

"version": "0.2.0",
"configurations": [

{
  "name": "Debug Frontend",
  "type": "pwa-chrome",
  "request": "launch",
  "preLaunchTask": "Serve Frontend",
  "url": "http://localhost:4200/#",
  "webRoot": "${workspaceFolder}",
  "sourceMaps": true,
  "sourceMapPathOverrides": {
    "webpack:/*": "${webRoot}/*",
    "/./*": "${webRoot}/*",
    "/src/*": "${webRoot}/src/*",
    "/*": "*",
    "/./~/*": "${workspaceFolder}/node_modules/*"
  }
}

More vscode discussion around the issue: https://github.com/microsoft/vscode/issues/167353

Recommended topics

Hot tags