No more source map while debugging nativescript app

[joweo]

Issue Description

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. But if you add the "debugger" command in a method and the debugger halts the .vue file is opened correclty (sometimes)?! Also when a hot deploy is committed you get the correct .vue file.

This error on debugging occurs in the latest package version(s) and the demo project.

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. Add "debugger;" to Items.vue in the method "onItemTab" (line 92)
3. Install an emulator or connect a hardware android device and start it
4. Run the debugger with "ns debug android"
5. Start the chrome dev tools: "devtools://devtools/bundled/inspector.html?ws=localhost:40000"
6. Click in the app on a row to trigger the breakpoint
7. Now you should see an precompiled version of Items.vue and in the "Call Stack" the line reference 93

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

[minhnhut]

I also experienced the same problem. Asked on discord but no answers.

[KristianSelnas]

Any news on this? It's really hampering our progress.

[minhnhut]

I wonder if somethings with Chrome itself. Because we tried to checkout the very old source code, and tried older package versions, etc.. It still doesn't work which is not making any sense.

[minhnhut]

I can confirm this issue fixed on my machine, source map now back to normal. Not sure how. Possibly, Chrome updates fixed this problem.