Unclear how to make Sentry work with Vite + React sourcemaps

[sirflyingv]

Environment

Vite 5.2.0, React 18.2, Node 20.11.0

What version are you running? Etc.

@sentry/react: 8.7.0
@sentry/vite-plugin: 2.18.0

Steps to Reproduce

1. Configured vite and sentry like that:

export default defineConfig({
  plugins: [
    react(),
    sentryVitePlugin({
      authToken: '... token ...',
      org: '... org name',
      project: ' ... project name',
    }),
  ],

  server: {
    port: 3000,
    proxy: {
      '/api': {
        target: 'https://my_needed_url.com',
        changeOrigin: true,
      },
    },
  },

  build: {
    outDir: 'build',
    sourcemap: true, // (!!!)
  },
});

Kept Sentry init options default

3. Made a button that throws error
4. Built prod bundle and served it with vite preview so my prod bundle runs
5. Sourcemaps are uploaded, I can see it
   

Expected Result

After firing error I expected to see normal stack trace with my code like this, like I see in browser:

Actual Result

But actually I'm getting weird stacktrace like this:

And this on Most Relevant tab

So where I got first screenshot?
If it configure VIte sourcemap: 'inline' I'm getting sourcemap baked into bundle so bundle file weights 11Mb+ but it allows Sentry to show me actual code.

So how to configure Vite and/or Sentry to get nice stacktraces without making weird 11Mb bundles with baked in sourcemaps?

If no clear idea comes to mind, maybe there is some repo in github where VIte + Sentry is configured nice way, so I can compare and try

[lforst]

build.sourcemap: true is fine. Do you have any other tools or plugins in your build pipeline? Some of them may generate faulty source maps.

[sirflyingv]

build.sourcemap: true is fine. Do you have any other tools or plugins in your build pipeline? Some of them may generate faulty source maps.

  "scripts": {
    "start": "vite",
    "build": "tsc && vite build ",
    "build_sentry": "tsc && vite build && npm run sentry:sourcemaps",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview",
    "sentry:sourcemaps": "sentry-cli sourcemaps inject --org ng-hp --project my-project-front ./build && sentry-cli sourcemaps upload --org ng-hp --project my-project-front ./build"
  },

I run npm run build_sentry and then npm run preview to serve build and trigger error button

[lforst]

so you are using the vite plugin and the cli to upload sourcemaps? I recommend removing one or the other.

[sirflyingv]

so you are using the vite plugin and the cli to upload sourcemaps? I recommend removing one or the other.

Yep, that was it, many thanks!!! Messed up a bit!
So it seems I created debug ids two times and uploaded two different packs to Sentry. And latest pack was not the one was running by Vite locally. Interesting that with sourcemap: 'inline' it worked