Add support for the "external" source map type (webpack's "hidden-source-map").

[rossipedia]

Often times, company policy prohibits exposing un-minified source code to the public, for various reasons.

In these instances, making source maps publicly accessible isn't feasible. Instead, they will often be uploaded to a service such as Sentry or Bugsnag, so that when errors are reported we can view unminified stack traces and get the original names/context back.

Currently, Remix's --sourcemap flag builds what Esbuild refers to as a "linked" source map.

The generated bundle includes a comment at the end of the form: //# sourceMappingURL=... which specifies the location of the source map, with the expectation that it will be uploaded to that URL, often right next to the JS bundle itself.

Since the *.map files can't be uploaded in our case, we end up with a spam of broken links in the browser console as it tries to find the source map for Remix's browser bundles.

Proposal: Add an option for "external" sourcemaps.

I realize the Remix team doesn't want to expose Esbuild internals externally, but the concept isn't specific to Esbuild. Webpack's equivalent is the hidden-source-map option for devtool:

POC implementation:

diff --git a/packages/remix-dev/cli/commands.ts b/packages/remix-dev/cli/commands.ts
index f97bd9702..1ce39321a 100644
--- a/packages/remix-dev/cli/commands.ts
+++ b/packages/remix-dev/cli/commands.ts
@@ -90,13 +90,13 @@ export async function routes(
 export async function build(
   remixRoot: string,
   mode?: string,
-  sourcemap: boolean = false
+  sourcemap?: Options["sourcemap"]
 ): Promise<void> {
   mode = mode ?? "production";
 
   logger.info(`building...` + pc.gray(` (NODE_ENV=${mode})`));
 
-  if (mode === "production" && sourcemap) {
+  if (mode === "production" && sourcemap === "linked") {
     logger.warn("🚨  source maps enabled in production", {
       details: [
         "You are using `--sourcemap` to enable source maps in production,",
diff --git a/packages/remix-dev/cli/run.ts b/packages/remix-dev/cli/run.ts
index 05796f3a0..26d663526 100644
--- a/packages/remix-dev/cli/run.ts
+++ b/packages/remix-dev/cli/run.ts
@@ -101,6 +101,7 @@ export async function run(argv: string[] = process.argv.slice(2)) {
       "-h": "--help",
       "--json": Boolean,
       "--sourcemap": Boolean,
+      "--unlinked-sourcemap": Boolean,
       "--token": String,
       "--typescript": Boolean,
       "--no-typescript": Boolean,
@@ -156,6 +157,10 @@ export async function run(argv: string[] = process.argv.slice(2)) {
     flags.typescript = false;
   }
 
+  if (args["--unlinked-sourcemap"]) {
+    flags.unlinkedSourcemap = true;
+  }
+
   let command = input[0];
 
   // Note: Keep each case in this switch statement small.
@@ -170,7 +175,15 @@ export async function run(argv: string[] = process.argv.slice(2)) {
       break;
     case "build":
       if (!process.env.NODE_ENV) process.env.NODE_ENV = "production";
-      await commands.build(input[1], process.env.NODE_ENV, flags.sourcemap);
+      await commands.build(
+        input[1],
+        process.env.NODE_ENV,
+        flags.sourcemap
+          ? "linked"
+          : flags.unlinkedSourcemap
+          ? "external"
+          : undefined
+      );
       break;
     case "watch":
       if (!process.env.NODE_ENV) process.env.NODE_ENV = "development";
diff --git a/packages/remix-dev/compiler/options.ts b/packages/remix-dev/compiler/options.ts
index fe31834ed..10668b663 100644
--- a/packages/remix-dev/compiler/options.ts
+++ b/packages/remix-dev/compiler/options.ts
@@ -2,7 +2,7 @@ type Mode = "development" | "production" | "test";
 
 export type Options = {
   mode: Mode | Omit<string, Mode>;
-  sourcemap: boolean;
+  sourcemap?: "linked" | "external";
 
   REMIX_DEV_ORIGIN?: URL; // TODO: required in v2
 };

[sergiodxa]

I think allowing this to be configured in the remix.config could be useful too

/** @type {import('@remix-run/dev').AppConfig} */
export default {
  sourcemap: "external" // or "internal" or false which can be the default
}