Unable to debug applications when output.library in webpack.config.js is set

[rosen-vladimirov]

Environment Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):

• CLI: 6.1.0
• Cross-platform modules: Not applicable
• Android Runtime: Not applicable
• iOS Runtime: Not applicable
• Plugin(s): Not applicable
• VSCode:

  Version: 1.37.1 (user setup)
  Commit: f06011ac164ae4dc8e753a3fe7f9549844d15e35
  Date: 2019-08-15T16:17:55.855Z
  Electron: 4.2.7
  Chrome: 69.0.3497.128
  Node.js: 10.11.0
  V8: 6.9.427.31-electron.0
  OS: Windows_NT x64 10.0.17134

Describe the bug In case you set output.library in the webpack.config.js file, the application does not hit breakpoints in VSCode anymore.

To Reproduce

1. $ tns create myApp --js
2. $ cd myApp
3. Now edit webpack.config.js and add library: "myLib" in the config.output section:

   output: {
   library: "myLib",
           pathinfo: false,
           path: dist,
           sourceMapFilename,
           libraryTarget: "commonjs2",
           filename: "[name].js",
           globalObject: "global",
           hashSalt
       },

4. Now open the project with VSCode and add NativeScript configuration for debug.
5. Run the Launch on Android or Launch on iOS configuration.
6. After application is running and debugger is attached, try to set a breakpoint in main-view-model.js's onTap handler. The breakpoint will be red dot in case it is successfully placed and grayed out otherwise. We expect to have red dot, but it is gray.
7. Now tap the button - breakpoint should be hit, but it is not

Expected behavior Debugging to work.

Sample project

Additional context The problem is in the parsing of the generated source maps - in case you parse them, the source URLs in them are in the following format:

"webpack://myLib/./main-view-model.js"

while we expect them to start with webpack:///

Workaround Add the following lines in your launch.json:

"sourceMapPathOverrides": {
    "webpack:///*": "${workspaceRoot}/<app dir name>/*",
    "webpack://<library name>/*": "${workspaceRoot}/<app dir name>/*"
}

Where <app dir name> is the name of your app folder as defined in nsconfig.json (probably app or src) and <library name> is the value of output.library from webpack.config.js.

For example, for the project created as described in the steps to reproduce, the snippet is:

"sourceMapPathOverrides": {
    "webpack:///*": "${workspaceRoot}/app/*",
    "webpack://myLib/*": "${workspaceRoot}/app/*"
}

[rosen-vladimirov]

Acceptance criteria:

• [x] When setting the library in webpack.config.js, debugging should work.
• [x] Set diagnosticLogging: true in launch.json and start debugging. Ensure there's no Error when trying to require webpack.config.js file from path in the generated log file from the extension. NOTE: Logs are located at %LOCALAPPDATA%\nativescript-extension.txt file on Windows.
• [x] In launch.json set:

  "sourceMapPathOverrides": {
  "webpack:///*": "${workspaceRoot}/app/*",
  "webpack://myLib/*": "invalid path/*"
  }

  The debugging should not work - this behavior verifies the extension will not overwrite the values specified by the user for sourceMapPathOverrides.

[endarova]

There is an issue on Mac OS: Error when trying to require webpack.config.js file from path 'Users/test/Documents/webpack/js1/webpack.config.js'. Error is: Error: Cannot find module 'Users/test/Documents/webpack/js1/webpack.config.js'