Fix sourcemap paths

[justingrant]

Fixes #3058.

Description of changes:

This PR adds shared logic to all Amplify packages' webpack.config.js files which will fix the sources array of sourcemap files so that those files can be found by the VSCode debugger and other IDEs.

This is needed because packages at build time live in different (relative) folder locations than the folders where packages will be installed from npm. These folder changes mean that end users can't easily debug into Amplify code using IDEs like VSCode. For example, breakpoints will be ignored, and "step into" will debug into confusing transpiled scripts instead of original TS or ES6 code.

For example, /packages/aws-amplify/src/index.ts imports @aws-amplify/ui. At build time, the aws-amplify and amplify-ui folders are siblings, but when the aws-amplify package is installed from npm, the amplify-ui folder is installed at ./node_modules/@aws-amplify/ui, which is a new name and is no longer a sibling to ./node_modules/aws-amplify like it was at build time.

This PR changes paths inside Amplify sourcemaps to conform to VSCode's default source mapping options here: https://github.com/Microsoft/vscode-chrome-debug#sourcemaps. The following changes are made:

1. sourcemap paths that point to node_modules dependencies (e.g. lodash) are mapped to webpack:///./node_modules/*
2. sourcemap paths that point to sibling packages under the @aws-amplify alias (like the UI example above) are mapped to webpack:///./node_modules/@aws-amplify/*
3. other paths, e.g. relative paths in the same package, or webpack or node builtins, will be left alone (same behavior as current webpack config).

IMPORTANT: if new packages are added to Amplify, they should be added the folder-to-package mapping object in webpack-utils.js in this PR.

Here's an excerpt of sourcemaps generated with this PR. Note that these paths match the "desired" paths from #3058.

{  
  "version":3,
  "sources":[  
    "webpack:///webpack/universalModuleDefinition",
    "webpack:///aws-amplify.js",
    "webpack:///webpack/bootstrap 1f06f3c00a3065bca915",
    "webpack:///./node_modules/aws-sdk/lib/core.js",
    "webpack:///./node_modules/@aws-amplify/core/lib/index.js",
    "webpack:///./node_modules/graphql/module/error/index.js",
    "webpack:///./node_modules/graphql/module/type/definition.js",
    "webpack:///./node_modules/graphql/module/language/kinds.js",
    "webpack:///./node_modules/aws-sdk/lib/util.js",
    "webpack:///./node_modules/@aws-amplify/core/lib/Logger/index.js",

By submitting this pull request, I confirm that my contribution is made under the terms of the Apache 2.0 license.

[alebiavati]

@justingrant Thanks for the PR!
I wonder if we could get this object dynamically via @lerna/list

[justingrant]

@alebiavati - The least-dependency way to automate the folder->package mapping would probably be to just enumerate the folders inside the packages directory and then pull out the name property from package.json in each folder.

Parsing the results from lerna list is another option, although I'd be inclined to go with the former approach to avoid a new dependency. (unless lerna list adds some additional value-- I'm not familiar enough to know for sure)

Another option is just to update the mapping manually. Automating is good, but if new packages are only added very rarely, then it may not be worth the extra complexity.

I'm happy to do any of these options. I don't feel strongly either way. What do you think?

[alebiavati]

We already use lerna so this wouldn't be an extra dependency. Lerna list returns both the NPM name and the folder name, so that could be used:
https://github.com/lerna/lerna/tree/master/commands/list#--json

Unfortunately that functionality is not exactly the same for our version of Lerna. We use v2.11.0 at the moment. We are going to upgrade as part of a different task so I'm merging this PR. We will refactor and make this map dynamic once we upgrade Lerna.

[github-actions]

This pull request has been automatically locked since there hasn't been any recent activity after it was closed. Please open a new issue for related bugs.

Looking for a help forum? We recommend joining the Amplify Community Discord server *-help channels or Discussions for those types of questions.