Help debug missing source map

[parched]

I get a lot of errors like this in the debug console when debugging my vite app in VS Code.

Could not read source map for
file:///J:/DevDrive/dev/vantage-3/vantage-2/src/%40fs/J%3A/DevDrive/dev/vantage-3/vantage-2/node_modules/%40microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK.Enums/EnumHelperFuncs.js:
ENOENT: no such file or directory, open
j:\DevDrive\dev\vantage-3\vantage-2\src\@fs\J:\DevDrive\dev\vantage-3\vantage-2\node_modules\@microsoft\applicationinsights-core-js\dist-es5\JavaScriptSDK.Enums\EnumHelperFuncs.js.map

It's only for this one particular library. I don't know if the issue is with the library, vite or vscode-js-debug. I'd like to debug it, but I don't know where to start. J:/DevDrive/dev/vantage-3/vantage-2/src is my root, vite config and node modules are in the directory above.

PS J:\DevDrive\dev\vantage-3\vantage-2> get-content J:/DevDrive/dev/vantage-3/vantage-2/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK.Enums/EnumHelperFuncs.js

/*
 * Application Insights JavaScript SDK - Core, 3.3.9
 * Copyright (c) Microsoft and contributors. All rights reserved.
 */


import { createEnum, createTypeMap } from "@nevware21/ts-utils";
/**
 * Create an enum style object which has both the key \=\> value and value \=\> key mappings
 * @param values - The values to populate on the new object
 * @returns
 */
export var createEnumStyle = createEnum;
/**
 * Create a 2 index map that maps an enum's key and value to the defined map value, X["key"] \=\> mapValue and X[0] \=\> mapValue.
 * Generic values
 * - E = the const enum type (typeof eRequestHeaders);
 * - V = Identifies the valid values for the keys, this should include both the enum numeric and string key of the type. The
 * resulting "Value" of each entry identifies the valid values withing the assignments.
 * @param values - The values to populate on the new object
 * @returns
 */
export var createValueMap = createTypeMap;
//# sourceMappingURL=EnumHelperFuncs.js.map

PS J:\DevDrive\dev\vantage-3\vantage-2> get-content J:\DevDrive\dev\vantage-3\vantage-2\node_modules@microsoft\applicationinsights-core-js\dist-es5\JavaScriptSDK.Enums\EnumHelperFuncs.js.map

{"version":3,"file":"EnumHelperFuncs.js.map","sources":["EnumHelperFuncs.js"],"sourcesContent":["// Copyright (c) Microsoft Corporation. All rights reserved.\r\n// Licensed under the MIT License.\r\nimport { createEnum, createTypeMap } from \"@nevware21/ts-utils\";\r\n/**\r\n * Create an enum style object which has both the key \\=\\> value and value \\=\\> key mappings\r\n * @param values - The values to populate on the new object\r\n * @returns\r\n */\r\nexport var createEnumStyle = createEnum;\r\n/**\r\n * Create a 2 index map that maps an enum's key and value to the defined map value, X[\"key\"] \\=\\> mapValue and X[0] \\=\\> mapValue.\r\n * Generic values\r\n * - E = the const enum type (typeof eRequestHeaders);\r\n * - V = Identifies the valid values for the keys, this should include both the enum numeric and string key of the type. The\r\n * resulting \"Value\" of each entry identifies the valid values withing the assignments.\r\n * @param values - The values to populate on the new object\r\n * @returns\r\n */\r\nexport var createValueMap = createTypeMap;\r\n//# sourceMappingURL=EnumHelperFuncs.js.map"],"names":[],"mappings":";;;;AAA4D;AAC1B;AAClC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}

[ghostkillerr]

Your output shows that the map exists in node_modules, while the debugger tries to read it under src/@fs/J:/.... That suggests checking URL-to-local-path mapping first, rather than assuming the package omitted its map.

In the browser Network panel, locate the actual JS request and resolve its relative sourceMappingURL against that request's URL. Check whether that map URL returns a valid source map, not HTML or a 404. If it does, inspect VS Code's webRoot and any sourceMapPathOverrides; turn on trace: true to see its resolution steps. If it does not, isolate the Vite serving/transform path before editing debugger overrides. Your root is a subdirectory but dependencies live above it, so the /@fs/ path is especially relevant.

Please share the launch configuration and the actual browser JS/map URLs, with sensitive values removed. I would not suggest a blanket override before seeing those values, because it could break maps for the rest of the app.

Reference: https://code.visualstudio.com/docs/nodejs/browser-debugging

Prepared with AI assistance and checked against the linked documentation. I have not reproduced your original project locally.

[R3Dzf]

Hi! One thing stands out in the error: VS Code is trying to locate the map inside src/@fs/J:/.../node_modules/..., which isn't a real filesystem location.

Vite uses /@fs/ as a special URL prefix for files outside its root. It looks like the debugger may be interpreting that URL as a path relative to your webRoot.

I'd start with these checks:

1. In your VS Code launch.json, check webRoot. Since your Vite config and node_modules are one directory above src, try pointing it at the actual project root (${workspaceFolder} if that's the root you opened), rather than src.
2. In browser DevTools, inspect the URL used to load EnumHelperFuncs.js, then check whether its referenced .js.map actually returns HTTP 200.
3. If the browser can fetch the map but VS Code still reports ENOENT, investigate VS Code's source-map path resolution rather than reinstalling the library.

As a temporary workaround, you can also exclude third-party node_modules maps from your debugging configuration if you don't need to step into that code.

Could you share your launch.json and the actual module URL shown in DevTools? That should help determine whether this is a Vite URL-mapping issue or a debugger configuration issue.

[Icaro0310]

The giveaway is the resolved path: src/@fs/J:/.... Vite is serving that dependency through /@fs/ because node_modules is above root, and VS Code is treating the encoded @fs URL as a file under src.

In the browser Network panel, open the real EnumHelperFuncs.js response and resolve its sourceMappingURL against that request URL. If the .map URL returns valid JSON, this is a js-debug mapping issue. Run with "trace": true and inspect the local path it constructs. If it 404s or returns HTML, the problem is on the Vite/package side.

Post your launch config and the actual JS/map URLs. I would not add a blanket sourceMapPathOverrides yet.

—
Check out my Repositories: github.com/Icaro0310 · Website: icaro0310.github.io

[parched]

My fix was to set pathMapping in launch.json

    {
      "name": "Edge",
      "request": "launch",
      "type": "msedge",
      "url": "https://localhost:3000",
      // Vite's root is src, so it serves node_modules as /@fs/<absolute path>, which is /@fs/C:/... on Windows
      "pathMapping": { "/@fs/": "/" },
      "windows": { "pathMapping": { "/@fs/": "" } },
      "webRoot": "${workspaceFolder}/src"
    },