Skip to content

Sourcemap option is ignored for client side build #2260

Closed

Description

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
  1. 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: [],
    },
  },
});
  1. Run the build command:
  • npm run build

Note: With remix 2.9

  1. setup a blank project

npx create-remix@latest

  1. 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:

image

Actual Behavior

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

image
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions