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 
![image](https://github.com/getsentry/sentry-javascript-bundler-plugins/assets/22076495/56cabfad-5521-4291-9bd0-a8d3c3e9da6a)

### Expected Result

After firing error I expected to see normal stack trace with my code like this, like I see in browser:
![image](https://github.com/getsentry/sentry-javascript-bundler-plugins/assets/22076495/a30c3faf-157f-4cf3-9f9f-48793ae294a0)

### Actual Result

But actually I'm getting weird  stacktrace like this:

![image](https://github.com/getsentry/sentry-javascript-bundler-plugins/assets/22076495/6f16b1ac-9fdf-439b-b888-d027900adc5e)

And this on Most Relevant tab
![image](https://github.com/getsentry/sentry-javascript-bundler-plugins/assets/22076495/06baf9e0-f511-4bf4-a7ce-e3583d90378f)

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