Sourcemap option is ignored for client side build

[gmilon]

What is the location of your example repository?

npm create @shopify/hydrogen@latest

Which package or tool is having this issue?

Hydrogen

What version of that package or tool are you using?

2024.4.5

What version of Remix are you using?

2.9.2

Steps to Reproduce

Generating sourcemap for client side build is helpful if we want to to setup proper error tracking with datadog or sentry:

1. Create a blank hydrogen project

• npm create @shopify/hydrogen@latest

2. set the sourcemap option to true in the vite.config.ts

import {defineConfig} from 'vite';
import {hydrogen} from '@shopify/hydrogen/vite';
import {oxygen} from '@shopify/mini-oxygen/vite';
import {vitePlugin as remix} from '@remix-run/dev';
import tsconfigPaths from 'vite-tsconfig-paths';

export default defineConfig({
  plugins: [
    hydrogen(),
    oxygen(),
    remix({
      presets: [hydrogen.preset()],
      future: {
        v3_fetcherPersist: true,
        v3_relativeSplatPath: true,
        v3_throwAbortReason: true,
      },
    }),
    tsconfigPaths(),
  ],
  build: {
    // Allow a strict Content-Security-Policy
    // withtout inlining assets as base64:
    assetsInlineLimit: 0,
    // here
    sourcemap: true,
  },
  ssr: {
    optimizeDeps: {
      /**
       * Include dependencies here if they throw CJS<>ESM errors.
       * For example, for the following error:
       *
       * > ReferenceError: module is not defined
       * >   at /Users/.../node_modules/example-dep/index.js:1:1
       *
       * Include 'example-dep' in the array below.
       * @see https://vitejs.dev/config/dep-optimization-options
       */
      include: [],
    },
  },
});

3. Run the build command:

• npm run build

Note: With remix 2.9

1. setup a blank project

npx create-remix@latest

2. set the sourcemap to true

import { vitePlugin as remix } from "@remix-run/dev";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";

export default defineConfig({
  plugins: [
    remix({
      future: {
        v3_fetcherPersist: true,
        v3_relativeSplatPath: true,
        v3_throwAbortReason: true,
      },
    }),
    tsconfigPaths(),
  ],
  build: {
   // here
    sourcemap: true
  }
});

Expected Behavior

The source map for client side build should be generated like remix 2.9:

Actual Behavior

the sourcemap are only generated for server side and not client side with h2:

[gmilon]

Not sure if this is a bug, it might be intended for security reasons, but would be great if we can optionally get the sourcemap with the build command.

I've seen some PR regarding this

[gmilon]

Seems like it's intended.

hydrogen/packages/cli/src/commands/hydrogen/build.ts

Line 168 in c3baf78

sourcemap: process.env.NODE_ENV !== 'production' && sourcemap,

[gmilon]

seems like this can be fixed using the build-command option:

npx shopify hydrogen deploy --build-command="remix vite:build

[blittle]

@gmilon we disable client sourcemaps in production because they leak the server code. That's because a single route in remix includes both server and client logic. So the sourcemap produced includes all that server logic too. You are welcome to get around it, but just realize if that sourcemap is exposed to the world, so is likely most of your server logic.