diff --git a/packages/project-utils/bundling/app/config/webpack.config.js b/packages/project-utils/bundling/app/config/webpack.config.js
index 5dc8ae46c2b..30a8746d91e 100644
--- a/packages/project-utils/bundling/app/config/webpack.config.js
+++ b/packages/project-utils/bundling/app/config/webpack.config.js
@@ -402,9 +402,19 @@ module.exports = function (webpackEnv, { paths, options }) {
                         // ** STOP ** Are you adding a new loader?
                         // Make sure to add the new loader(s) before the "file" loader.
                     ]
-                }
-            ]
+                },
+                shouldUseSourceMap
+                    ? {
+                          enforce: "pre",
+                          exclude: /@babel(?:\/|\\{1,2})runtime/,
+                          include: [paths.appSrc, paths.appIndexJs, ...paths.allWorkspaces],
+                          test: /\.js/,
+                          loader: "source-map-loader"
+                      }
+                    : null
+            ].filter(Boolean)
         },
+        ignoreWarnings: [/Failed to parse source map/],
         plugins: [
             new webpack.ProvidePlugin({
                 Buffer: ["buffer", "Buffer"]
diff --git a/packages/project-utils/packages/buildPackage.js b/packages/project-utils/packages/buildPackage.js
index a4262669575..cac526df40e 100644
--- a/packages/project-utils/packages/buildPackage.js
+++ b/packages/project-utils/packages/buildPackage.js
@@ -95,7 +95,7 @@ const babelCompile = async ({ cwd }) => {
         }
     }
 
-    // At this point, just wait for compilations to be completed so we can proceed with writing the files ASAP.
+    // At this point, just wait for compilations to be completed, so we can proceed with writing the files ASAP.
     await Promise.all(compilations);
 
     const writes = [];
@@ -107,7 +107,7 @@ const babelCompile = async ({ cwd }) => {
         fs.mkdirSync(dirname(paths.code), { recursive: true });
 
         // Save the compiled JS file.
-        writes.push(fs.promises.writeFile(paths.code, code, "utf8"));
+        writes.push(fs.promises.writeFile(paths.code, withSourceMapUrl(file, code), "utf8"));
 
         // Save source maps file.
         const mapJson = JSON.stringify(map);
@@ -118,6 +118,11 @@ const babelCompile = async ({ cwd }) => {
     return Promise.all([...writes, ...copies]);
 };
 
+const withSourceMapUrl = (file, code) => {
+    const { name } = parse(file);
+    return [code, "", `//# sourceMappingURL=${name}.js.map`].join("\n");
+};
+
 const tsCompile = ({ cwd, overrides, debug }) => {
     return new Promise((resolve, reject) => {
         let { config: readTsConfig } = ts.readConfigFile(