Skip to content

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

@rosen-vladimirov

Description

@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 }, 
  1. Now open the project with VSCode and add NativeScript configuration for debug.
  2. Run the Launch on Android or Launch on iOS configuration.
  3. 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.
  4. 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/*" }

Metadata

Metadata

Labels

buge2e test neededDescribes that issue requires functional test

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions