Google Chome 99+ DevTools Source Tab not showing VUE file code in Webpack SRC folder

Question

I am sorry if I did not phrase the title well because I am at a complete lost of what the technical terminology is and really how to search for an answer. This was not an issue until I updated Google Chrome to Version 99.0.4844.51. This is also an issue in Window's Edge, but not Firefox 97.0.2 dev tools.

I have a fairly standard multi-page Vue 2 app. I am trying to debug an issue and in the Chrome DevTools, NOT Vue DevTools, I used to be able to see the source code of a single file component and step through methods etc.

On the left hand side in the Chrome DevTools Source Tab there is the Page tab. In the webpack:// folder you have four sub folders one of those is SRC. It lists my .vue files but instead of showing the typical template, script, and style code sections it shows the following. A list of imports and a hot reload.

I am not sure what changed with the Chrome based DevTools. Is there a new setting in Chrome or something?

If you can make suggestions on how to phrase my question better please advise. Thanks for your patience and understanding.

UPDATE 1:

Here is what I have found so far. The sources panel does not load the vue file as expected in local development on localhost.

On our production site some page will and others won't. The only differences between the pages that do and the ones that don't are relative imports.

Example Pages that work will use imports that utilize Webpack's resolve alias configs.

Pages that don't will have imports with paths like import file"./somefile.js" or import file from "../../folder/somefile.js"

I have tested locally by changing import paths to Webpack's resolve alias paths but it did not fix the issue.

Does anyone suffering from this issue import similarly?

Update 2:

I created a project/repo showing the issue so the Chromium team can fix the issue.

Answer 1

This was an issue with chromium and the ticket has been closed and marked fixed. Current fix is working in Version 103.0.5016.0 (Official Build) canary (64-bit).

Answer 2

I have tries to use eval-source-map. It seems like that can see the source code. But there is still some problem when error happened. It would be impossible to locate the specific line directly.