Fix sourcemap paths

packages/amazon-cognito-identity-js/webpack.config.js

@@ -31,7 +31,8 @@ var config = {
     filename: '[name].js',
     path: __dirname + '/dist',
     libraryTarget: 'umd',
-    library: 'AmazonCognitoIdentity'
+    library: 'AmazonCognitoIdentity',
+    devtoolModuleFilenameTemplate: require('../aws-amplify/webpack-utils').devtoolModuleFilenameTemplate
   },
   plugins: [
     new webpack.optimize.OccurrenceOrderPlugin(),

packages/amplify-ui/webpack.config.js

@@ -10,7 +10,8 @@ module.exports = {
       path: __dirname + '/dist',
       library: 'aws_amplify_ui',
       libraryTarget: 'umd',
-      umdNamedDefine: true
+      umdNamedDefine: true,
+      devtoolModuleFilenameTemplate: require('../aws-amplify/webpack-utils').devtoolModuleFilenameTemplate
   },
   // Enable sourcemaps for debugging webpack's output.
   devtool: 'source-map',

packages/analytics/webpack.config.js

@@ -11,7 +11,8 @@ module.exports = {
         path: __dirname + '/dist',
         library: 'aws_amplify_analytics',
         libraryTarget: 'umd',
-        umdNamedDefine: true
+        umdNamedDefine: true,
+        devtoolModuleFilenameTemplate: require('../aws-amplify/webpack-utils').devtoolModuleFilenameTemplate
     },
     // Enable sourcemaps for debugging webpack's output.
     devtool: 'source-map',

packages/api/webpack.config.js

@@ -11,7 +11,8 @@ module.exports = {
         path: __dirname + '/dist',
         library: 'aws_amplify_api',
         libraryTarget: 'umd',
-        umdNamedDefine: true
+        umdNamedDefine: true,
+        devtoolModuleFilenameTemplate: require('../aws-amplify/webpack-utils').devtoolModuleFilenameTemplate
     },
     // Enable sourcemaps for debugging webpack's output.
     devtool: 'source-map',

packages/auth/webpack.config.js

@@ -14,7 +14,8 @@ module.exports = {
         path: __dirname + '/dist',
         library: 'aws_amplify_auth',
         libraryTarget: 'umd',
-        umdNamedDefine: true
+        umdNamedDefine: true,
+        devtoolModuleFilenameTemplate: require('../aws-amplify/webpack-utils').devtoolModuleFilenameTemplate
     },
     // Enable sourcemaps for debugging webpack's output.
     devtool: 'source-map',

packages/aws-amplify/webpack-utils.js

@@ -0,0 +1,80 @@
+// This module fixes sourcemap paths for the various Amplify packages. It's
+// needed because packages at build time live in different (relative) folder
+// locations than the folders where packages are installed from npm. 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. These
+// changes mean that end users can't easily debug into Amplify code, especially
+// using IDEs like VSCode.
+//
+// The code in this file changes paths inside Amplify sourcemaps to work around
+// the issues above. 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 (using package names, not
+//    folders) 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).
+//
+// These path mappings are designed to be compatible with VSCode's default
+// source mapping options here:
+// https://github.com/Microsoft/vscode-chrome-debug#sourcemaps
+//
+// IMPORTANT: if new packages are added to Amplify, add them to the map below.
+
+const packageFolderMap = {
+  'amazon-cognito-identity-js': 'amazon-cognito-identity-js',
+  'amplify-ui': '@aws-amplify/ui',
+  'analytics': '@aws-amplify/analytics',
+  'api': '@aws-amplify/api',
+  'auth': '@aws-amplify/auth',
+  'aws-amplify': 'aws-amplify',
+  'aws-amplify-angular': 'aws-amplify-angular',
+  'aws-amplify-react': 'aws-amplify-react',
+  'aws-amplify-react-native': 'aws-amplify-react-native',
+  'aws-amplify-vue': 'aws-amplify-vue',
+  'cache': '@aws-amplify/cache',
+  'core': '@aws-amplify/core',
+  'interactions': '@aws-amplify/interactions',
+  'pubsub': '@aws-amplify/pubsub',
+  'pushnotification': '@aws-amplify/pushnotification',
+  'storage': '@aws-amplify/storage',
+  'xr': '@aws-amplify/xr',
+}
+
+const folders = Object.keys(packageFolderMap);
+const nodeModules = '/node_modules/';
+const webpackPrefix = 'webpack:///';
+const webpackNodeModules = webpackPrefix + '.' + nodeModules;
+
+function devtoolModuleFilenameTemplate (info) {
+  const resource = info.resource;
+
+  if (resource.includes(nodeModules)) {
+    // dependency paths
+    const start = resource.indexOf(nodeModules);
+    const after = start + nodeModules.length;
+    return webpackNodeModules + resource.substring(after);
+  } else if (resource.includes('../')) {
+    // handle relative paths to other packages in this monorepo by converting them into absolute
+    // paths pointing at node_modules
+    for (let i = 0; i < folders.length; i++) {
+      const folder = folders[i];
+      const relative = '../'+folder;
+      const start = resource.indexOf(relative);
+      if (start !== -1) {
+        const after = start + relative.length;
+        return webpackNodeModules + packageFolderMap[folder] + resource.substring(after);
+      }
+    }
+  }
+  // fall-through (e.g. relative paths in this package, webpack builtins, unknown package paths)
+  return webpackPrefix + resource;
+}
+
+module.exports = {
+  devtoolModuleFilenameTemplate
+}

packages/aws-amplify/webpack.config.js

@@ -11,7 +11,8 @@ module.exports = {
         path: __dirname + '/dist',
         library: 'aws-amplify',
         libraryTarget: 'umd',
-        umdNamedDefine: true
+        umdNamedDefine: true,
+        devtoolModuleFilenameTemplate: require('../aws-amplify/webpack-utils').devtoolModuleFilenameTemplate
     },
     externals: {
         'react-native': 'react-native'

packages/cache/webpack.config.js

@@ -11,7 +11,8 @@ module.exports = {
         path: __dirname + '/dist',
         library: 'aws_amplify_cache',
         libraryTarget: 'umd',
-        umdNamedDefine: true
+        umdNamedDefine: true,
+        devtoolModuleFilenameTemplate: require('../aws-amplify/webpack-utils').devtoolModuleFilenameTemplate
     },
     // Enable sourcemaps for debugging webpack's output.
     devtool: 'source-map',

packages/core/webpack.config.js

@@ -11,7 +11,8 @@ module.exports = {
         path: __dirname + '/dist',
         library: 'aws_amplify_core',
         libraryTarget: 'umd',
-        umdNamedDefine: true
+        umdNamedDefine: true,
+        devtoolModuleFilenameTemplate: require('../aws-amplify/webpack-utils').devtoolModuleFilenameTemplate
     },
     // Enable sourcemaps for debugging webpack's output.
     devtool: 'source-map',

packages/interactions/webpack.config.js

@@ -11,7 +11,8 @@ module.exports = {
         path: __dirname + '/dist',
         library: 'aws_amplify_interactions',
         libraryTarget: 'umd',
-        umdNamedDefine: true
+        umdNamedDefine: true,
+        devtoolModuleFilenameTemplate: require('../aws-amplify/webpack-utils').devtoolModuleFilenameTemplate
     },
     // Enable sourcemaps for debugging webpack's output.
     devtool: 'source-map',

packages/pubsub/webpack.config.js

@@ -11,7 +11,8 @@ module.exports = {
         path: __dirname + '/dist',
         library: 'aws_amplify_pubsub',
         libraryTarget: 'umd',
-        umdNamedDefine: true
+        umdNamedDefine: true,
+        devtoolModuleFilenameTemplate: require('../aws-amplify/webpack-utils').devtoolModuleFilenameTemplate
     },
     // Enable sourcemaps for debugging webpack's output.
     devtool: 'source-map',

packages/storage/webpack.config.js

@@ -11,7 +11,8 @@ module.exports = {
         path: __dirname + '/dist',
         library: 'aws_amplify_storage',
         libraryTarget: 'umd',
-        umdNamedDefine: true
+        umdNamedDefine: true,
+        devtoolModuleFilenameTemplate: require('../aws-amplify/webpack-utils').devtoolModuleFilenameTemplate
     },
     // Enable sourcemaps for debugging webpack's output.
     devtool: 'source-map',

packages/xr/webpack.config.js

@@ -11,7 +11,8 @@ module.exports = {
         path: __dirname + '/dist',
         library: 'aws_amplify_xr',
         libraryTarget: 'umd',
-        umdNamedDefine: true
+        umdNamedDefine: true,
+        devtoolModuleFilenameTemplate: require('../aws-amplify/webpack-utils').devtoolModuleFilenameTemplate
     },
     // Enable sourcemaps for debugging webpack's output.
     devtool: 'source-map',