No more source map while debugging nativescript app

Issue Description

This issue is copied from https://github.com/NativeScript/nativescript-cli/issues/5657

Since about March 10th 2022 debugging in chrome and VS Code fails as there is no more valid source mapping for the .vue files.

The line number of breakpoints of the original .vue file is correct but the .vue file is not opened with an error hint that the source map coverage is n/a. This error on debugging occurs in the latest package version(s) and the demo project. It fails for all project types (nativescript js, angular, vue).

The following example program is an official demo project from nativescript:

In the call stack, you can see onItemTab method and the reference to Items.vue:93

Versions node.js 16.4.2 nativescript 8.2.3 npm 8.5.0 java openJdk 11

package.json:

{
  "name": "test",
  "main": "app/app.js",
  "version": "1.0.0",
  "private": true,
  "dependencies": {
    "@nativescript/core": "~8.2.0",
    "@nativescript/theme": "~3.0.2",
    "nativescript-vue": "~2.9.0"
  },
  "devDependencies": {
    "@nativescript/android": "8.2.2",
    "@nativescript/webpack": "~5.0.6",
    "nativescript-vue-template-compiler": "~2.9.0"
  }
}

ns doctor output ✔ Getting environment information

No issues were detected. ✔ Your ANDROID_HOME environment variable is set and points to correct directory. ✔ Your adb from the Android SDK is correctly installed. ✔ The Android SDK is installed. ✔ A compatible Android SDK for compilation is found. ✔ Javac is installed and is configured properly. ✔ The Java Development Kit (JDK) is installed and is configured properly. ✔ Local builds for iOS can be executed only on a macOS system. To build for iOS on a different operating system, you can use the NativeScript cloud infrastructure. ✔ Getting NativeScript components versions information... ✔ Component nativescript has 8.2.3 version and is up to date. ✔ Component @nativescript/core has 8.2.1 version and is up to date. ✖ Component @nativescript/ios is not installed. ✔ Component @nativescript/android has 8.2.2 version and is up to date.

Reproduction

Reproduce this issue

With chrome dev tools

1. Create a new project with "ns create --vue", give a name and select "Tabs"
2. Install an emulator or connect a hardware android device and start it
3. Run the debugger with "ns debug android"
4. Start the chrome dev tools: "devtools://devtools/bundled/inspector.html?ws=localhost:40000"
5. No source map available

We have this issue on all platforms (windows+android and mac+ios)

With Visual Studio Code

1. Create a new project with "ns create --vue", give a name and select "Tabs"
2. Open root directory with VS Code
3. Install the "NativeScript" extension
4. Open the run and debug tab
5. Click on create launch.json and select "NativeScript"
6. Select "Run on Android" and run the debugger
7. You should now see an error message in the debug console

Relevant log output (if applicable)

Debugging with Visual Studio Code
Visual Studio Code shows the following exception while starting the debugger:

Error when trying to require webpack.config.js file from path '<PATH TO PROJECT ROOT DIRECOTRY>\webpack.config.js'. Error is: Error: Cannot find module 'C:\Users\<USERNAME>\AppData\Local\Programs\Microsoft VS Code\package.json'
Require stack:
- <PATH TO ROOT PROJECT DIRECTORY>\node_modules\@nativescript\webpack\dist\helpers\project.js
- <PATH TO ROOT PROJECT DIRECTORY>\node_modules\@nativescript\webpack\dist\helpers\dependencies.js
- <PATH TO ROOT PROJECT DIRECTORY>\node_modules\@nativescript\webpack\dist\helpers\externalConfigs.js
- <PATH TO ROOT PROJECT DIRECTORY>\node_modules\@nativescript\webpack\dist\index.js
- <PATH TO ROOT DIRECTORY>\webpack.config.js
- c:\Users\<USERNAME>\.vscode\extensions\nativescript.nativescript-0.12.3\out\debug-adapter\nativeScriptDebugAdapter.js
- c:\Users\<USERNAME>\.vscode\extensions\nativescript.nativescript-0.12.3\out\debug-adapter\nativeScriptDebug.js
- C:\Users\<USERNAME>\AppData\Local\Programs\Microsoft VS Code\[eval]

Environment

No response

Please accept these terms

• [X] I have searched the existing issues as well as StackOverflow and this has not been posted before
• [X] This is a bug report
• [X] I agree to follow this project's Code of Conduct

The same problem with .svelte files

I agree that it should work out of the box.

FYI, In case of angular I had success getting vscode debugger working, with the following changes:

package.json

{
    "name": "my-app-name",
}

tsconfig.json

{
    "compilerOptions": {
        "sourceMap": true,
    }
}

launch.json

{
    "configurations": [
        {
            "name": "iPad",
            "type": "nativescript",
            "request": "launch",
            "watch": true,
            "stopOnEntry": false,
            "platform": "ios",
            "appRoot": "${workspaceRoot}",
            "sourceMaps": true,
            "sourceMapPathOverrides": {
                // "my-app-name" as per package.json > name
                "webpack://my-app-name/*": "${workspaceRoot}/*",
            }
        }
    ]
}