Sentry sourcemap use `@vitejs/plugin-legacy` and `@sentry/vite-plugin` conflict.

[itaober]

Environment

Node: v18.16.0
Vite: v5.3.1 (latest)
@sentry/vite-plugin: ^2.20.0
@vitejs/plugin-legacy: ^5.4.1
Project created using npm create vite, and choose React + TypeScript

What version are you running? Etc.

Steps to Reproduce

1. Create a new Vite project.
2. Config @vitejs/plugin-legacy.
3. Config sentryVitePlugin, like this:
   vite.config.ts:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import legacy from "@vitejs/plugin-legacy";
import { sentryVitePlugin } from "@sentry/vite-plugin";

// https://vitejs.dev/config/
export default defineConfig({
  build: {
    sourcemap: true,
  },
  plugins: [
    react(),
    legacy({
      targets: ["defaults", "not IE 11"],
    }),
    // notice: ... is my private config
    sentryVitePlugin({
      url: "...",
      org: "...",
      project: "...",
      authToken: "...",
      release: {
        name: "...",
      },
      sourcemaps: {
        assets: "dist/assets/**",
        ignore: ["node_modules"],
        filesToDeleteAfterUpload: "dist/**/*.map",
      },
    }),
  ],
});

4. Add the following to App.tsx to test:
   App.tsx:

// ...
<button
  onClick={() => {
      throw new Error("VITE SENTRY");
    })
  }
>
  count is {count}
</button>
// ...

Expected Result

The expected result is similar to the second image under the "Actual Result" section.

Actual Result

With the legacy plugin enabled:

Without the legacy plugin:
vite.config.ts:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import legacy from "@vitejs/plugin-legacy";
import { sentryVitePlugin } from "@sentry/vite-plugin";

// https://vitejs.dev/config/
export default defineConfig({
  build: {
    sourcemap: true,
  },
  plugins: [
    react(),
    // notice: ... is my private config
    sentryVitePlugin({
      url: "...",
      org: "...",
      project: "...",
      authToken: "...",
      release: {
        name: "...",
      },
      sourcemaps: {
        assets: "dist/assets/**",
        ignore: ["node_modules"],
        filesToDeleteAfterUpload: "dist/**/*.map",
      },
    }),
  ],
});

This configuration works correctly:

When using the legacy plugin, the build uploads two sourcemaps:

Without the legacy plugin, only one sourcemap is uploaded:

Issue

I need to use the legacy plugin, but it seems incompatible with Sentry sourcemaps. Any help would be appreciated.

[lforst]

Hi, can you try version 2.20.1 of the @sentry/vite-plugin? Thanks!

[itaober]

Hi, can you try version 2.20.1 of the @sentry/vite-plugin? Thanks!

Thank you for your suggestion. I tried version 2.20.1 of the @sentry/vite-plugin, but the issue persists.

I noticed that with the legacy plugin enabled, the sourcemaps are uploaded twice during the build:

When the legacy plugin is disabled, the sourcemaps are only uploaded once:

Because of this, Sentry errors cannot be mapped to the source code locations. I believe this issue is related to the double upload of sourcemaps, but I'm not sure how to resolve it. I encountered this problem with a newly created Vite project with minimal configuration.

Any assistance would be greatly appreciated.

Thank you!

[itaober]

And this is my package.json:

{
  "name": "sentry-test",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  },
  "devDependencies": {
    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.0",
    "@typescript-eslint/eslint-plugin": "^7.13.1",
    "@typescript-eslint/parser": "^7.13.1",
    "@vitejs/plugin-react": "^4.3.1",
    "eslint": "^8.57.0",
    "eslint-plugin-react-hooks": "^4.6.2",
    "eslint-plugin-react-refresh": "^0.4.7",
    "typescript": "^5.2.2",
    "vite": "^5.3.1",
    "@sentry/vite-plugin": "^2.20.1",
    "@vitejs/plugin-legacy": "^5.4.1",
    "@sentry/react": "^8.11.0"
  }
}
```

[itaober]

I was wondering if it's possible to upload the sourcemap after the build is finished, rather than during the build, but I haven't been able to configure the @sentry/vite-plugin to do this.

[lforst]

I think our Vite plugin is incompatible with vitejs/plugin-legacy due to it doing funky stuff during build. Please use Sentry CLI to upload source maps for now: https://docs.sentry.io/platforms/javascript/guides/angular/sourcemaps/uploading/cli/