`@sentry/sveltekit` throws JS parsing error when added to `vite.config.js`

[selfagency]

Is there an existing issue for this?

• [X] I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
• [X] I have reviewed the documentation https://docs.sentry.io/
• [X] I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases

How do you use Sentry?

Sentry Saas (sentry.io)

Which SDK are you using?

@sentry/svelte

SDK Version

8.0.0 but also happens when I downgrade to 7.114.0.

Framework Version

Sveltekit 2.0.0

Link to Sentry event

No response

SDK Setup

import { sentrySvelteKit } from '@sentry/sveltekit';
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vitest/config';

export default defineConfig({
  plugins: [
    sentrySvelteKit({
      sourceMapsUploadOptions: {
        org: 'cnyric',
        project: 'supplies-frontend',
      },
    }),
    sveltekit(),
  ],
  test: {
    include: ['src/**/*.{test,spec}.{js,ts}'],
  },
});

Steps to Reproduce

I followed the directions here: https://docs.sentry.io/platforms/javascript/guides/sveltekit/#compatibility. Then I started my app in dev mode and it instantly crashed.

Expected Result

For my application to not crash. If I comment out the sentrySvelteKit block in the vite.config.js everything works fine.

Actual Result

SyntaxError: Unexpected token, expected "}" (17:42)
    at constructor (/home/dsieradski@ad.ocmboces.org/dev/supplies_project/supplies_redux/node_modules/.pnpm/@babel+parser@7.24.5/node_modules/@babel/parser/lib/index.js:351:19)
    at V8IntrinsicMixin.raise (/home/dsieradski@ad.ocmboces.org/dev/supplies_project/supplies_redux/node_modules/.pnpm/@babel+parser@7.24.5/node_modules/@babel/parser/lib/index.js:3281:19)
    at V8IntrinsicMixin.unexpected (/home/dsieradski@ad.ocmboces.org/dev/supplies_project/supplies_redux/node_modules/.pnpm/@babel+parser@7.24.5/node_modules/@babel/parser/lib/index.js:3301:16)
    at V8IntrinsicMixin.expect (/home/dsieradski@ad.ocmboces.org/dev/supplies_project/supplies_redux/node_modules/.pnpm/@babel+parser@7.24.5/node_modules/@babel/parser/lib/index.js:3605:28)
    at V8IntrinsicMixin.jsxParseExpressionContainer (/home/dsieradski@ad.ocmboces.org/dev/supplies_project/supplies_redux/node_modules/.pnpm/@babel+parser@7.24.5/node_modules/@babel/parser/lib/index.js:6702:10)
    at V8IntrinsicMixin.jsxParseElementAt (/home/dsieradski@ad.ocmboces.org/dev/supplies_project/supplies_redux/node_modules/.pnpm/@babel+parser@7.24.5/node_modules/@babel/parser/lib/index.js:6776:36)
    at V8IntrinsicMixin.jsxParseElement (/home/dsieradski@ad.ocmboces.org/dev/supplies_project/supplies_redux/node_modules/.pnpm/@babel+parser@7.24.5/node_modules/@babel/parser/lib/index.js:6814:17)
    at V8IntrinsicMixin.parseExprAtom (/home/dsieradski@ad.ocmboces.org/dev/supplies_project/supplies_redux/node_modules/.pnpm/@babel+parser@7.24.5/node_modules/@babel/parser/lib/index.js:6824:19)
    at V8IntrinsicMixin.parseExprAtom (/home/dsieradski@ad.ocmboces.org/dev/supplies_project/supplies_redux/node_modules/.pnpm/@babel+parser@7.24.5/node_modules/@babel/parser/lib/index.js:10111:45)
    at V8IntrinsicMixin.parseExprSubscripts (/home/dsieradski@ad.ocmboces.org/dev/supplies_project/supplies_redux/node_modules/.pnpm/@babel+parser@7.24.5/node_modules/@babel/parser/lib/index.js:10607:23

[Lms24]

Hey @selfagency thanks for writing in!

Did you upgrade from version 7 of the SDK or start fresh with version 8.0.0?

I'm not yet sure this is the actual cause but this could be related to our auto instrumentation feature of load functions. Can you disable auto instrumentation and try again? Let's see if this is it.

[selfagency]

@Lms24 I started fresh with 8.0.0.

It also did not like that change. Same error as before.

(Posted the wrong error message in the first version of this reply.)

[Lms24]

Hmm I wonder what else is causing this then... also do you have an idea where this syntax error is actually occurring?

My guess was that our auto instrumentation which modifies some of your files during building causes this. But apparently it's not. Not sure if it helps but you could try disabling source maps upload? But iirc, this shouldn't even be active in dev mode...

Does this only affect dev mode or also npm run build?

[selfagency]

@Lms24 This works though is obviously not ideal:

    sentrySvelteKit({
      autoInstrument: false,
    }),

[lforst]

@selfagency Can you make out from the error logs where exactly (or what syntax) the parser is crashing at? It would be ideal if you could share the relevant code snippet!

[suheyla-cetin]

I am getting the same error and here is my packages with their versions:

"@sentry/browser": "^7.116.0",
"@sentry/sveltekit": "^8.7.0",
"@sentry/tracing": "^7.14.1",

[Lms24]

Hi @suheyla-cetin please make sure to always use exactly the same SDK version across @sentry/ packages! You might run into a lot of issues with having multiple (especially major) versions. Also note that @sentry/tracing is no longer required in recent v7 and all v8 versions.

Regarding this issue: We're still not sure what kind of syntax is causing this error. It could be related to using angle braces-style type assertions as reported in https://github.com/getsentry/sentry-javascript/issues/9318 but ideally, anyone following can confirm this or provide a reproduction please.

[dihmeetree]

I'm also getting an error with the following in my SvelteKit app as well. The error shows on some pages when I refresh, but not others.

sentrySvelteKit({
    sourceMapsUploadOptions: {
      org: '<my_org>',
      project: '<my_project>',
      authToken: process.env.SENTRY_AUTH_TOKEN
    }
  })

Error:

Cannot read properties of undefined (reading 'context')

If I do this however, I don't get the error:

sentrySvelteKit({
  autoUploadSourceMaps: false
})

[lforst]

@dihmeetree Would you mind sharing reproduction? Thank you!