process is not defined in dev mode - @sentry/sveltekit

[dann2g]

Is there an existing issue for this?

• I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
• I have reviewed the documentation https://docs.sentry.io/
• 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/browser

SDK Version

7.56.0

Framework Version

1.5.0

Link to Sentry event

No response

SDK Setup

N/A

Steps to Reproduce

Install @sentry/sveltekit as a node dependency

Run start SvelteKit in dev mode with npm run dev

Error in console:

ReferenceError: process is not defined
    at <stdin> (util.js?v=25e5feed:86:5)
    at __require (util.js?v=25e5feed:3:50)
    at util.js?v=25e5feed:572:16

No other code required

Expected Result

SvelteKit dev mode works normally (no errors)

Actual Result

JavaScript on page is broken due to the following error:

ReferenceError: process is not defined
    at <stdin> (util.js?v=25e5feed:86:5)
    at __require (util.js?v=25e5feed:3:50)
    at util.js?v=25e5feed:572:16

For some reason the @sentry/sveltekit package is getting bundled into the client side code and in utils.js (from the above error) is trying to access process.env.NODE_DEBUG.

This doesn't happen in the production built version.

[Lms24]

Hi @dann2g thanks for writing in!

On first glance, this looks like something went wrong during installation. Node code should not end up in your browser JS bundles.
Did you by chance install @sentry/sveltekit as a devDependency? It needs to be installed as a dependency.
Did you follow the guide (wizard or manual setup) for setting up the SDK?

Just as a sanity check, I added the SDK to a fresh SvelteKit app and running dev mode works fine for me.

[dann2g]

@Lms24 You're right. We found the culprit, it was due to the @originjs/vite-plugin-commonjs plugin. Weirdly, this was only reproducible when:

• @sentry/sveltekit was installed as a dependency (no setup)
• @originjs/vite-plugin-commonjs was installed as a plugin
• certain packages (e.g. lodash-es) were imported into .svelte files

Not a Sentry issue so this can be closed. Thank you for your help.

[Lms24]

No worries, glad you found it :)

[geoextra]

In my SvelteKit project upgrading to Vite v5 seems to produce this issue without addition plugins. @sentry/sveltekit is the only package which didn't migrate, so there might be some adjustment possible. There is a very long changelog which also includes migration to Rollup 4, so it hard for me to identify the issue.

[Lms24]

@geoextra any chance you can provide a minimal reproduction that demonstrates this bug? Haven't looked into SvelteKit + Vite 5 yet so I'm happy to reopen this if we can reproduce it.

[geoextra]

This problem might be tracked in #9624 as well.
While creating my example, I noticed that peerDependency conflicts came up with the default SvelteKit template, so I don't want to jump to conclusions about the official support Vite has from SvelteKit.

[Lms24]

Yup, we're aware of this issue. Just don't have time to look at it at the moment. Yeah, maybe we just wait for official Sveltekit<>Vite 5 support first and then investigate.

I already tested Vite 5 with Astro and our Astro SDK (which also uses our Vite plugin) and it seems to work well.

[internpoon]

I have same issue, and i used the wizard installation. How can i resolve it

[internpoon]

I have same issue, and i used the wizard installation. How can i resolve it
Resolved it by adding the node_env to vite

export default defineConfig(({ mode }) => ({
  plugins: [sentrySvelteKit({
    sourceMapsUploadOptions: {
      org: ".",
      project: ".",
      authToken: process.env.SENTRY_AUTH_TOKEN,
      url: ".",
      cleanArtifacts: true,
      rewrite: false,
    }
  }), sveltekit()],
  define: {
    'process.env.NODE_ENV': JSON.stringify(mode),
  },
}))

[Lms24]

same issue

Hi @internpoon can you provide a minimal reproducible example of your issue? Node code shouldn't end up in your browser bundle and checking an env variable should generally work in Node land.

Are you using Vite 5? If yes: we're having some troubles with Vite 5 and Sveltekit. Maybe I have time to look at this next week.

[internpoon]

provide a minimal reproducible example of your issue? Node code shouldn't end up in your browser bundle and checking an env variable should generally work in Node land.

Are you using Vite 5? If yes: we're having some troubles with Vite 5 and Sveltekit. Maybe I have time to look at this next week.

Nope, I'm using Vite 4.5.1
Well, could be my issue too actually haha as i have a global helper file shared between FE and BE where the file import util from 'util' which should be only imported in the backend. But well, it work before that.

[Lms24]

To debug this: if you remove this file, do you still get the error?

I have an idea what could be causing this issue (might be related to #9629) but I'm still surprised that this would end up in a browser bundle.

[internpoon]

yea, as long as I remove this line import util from 'util' then its all good.

[Lms24]

I checked and we access process.env.NODE_ENV twice:

• Once in the new Spotlight integration (fixed in fix(node): Guard process.env.NODE_ENV access in Spotlight integration #9748)
• Once during build/in dev mode in sentrySvelteKit but I'm really not sure how this could even end up in the browser. Do you get some kind of stack trace along the error?

[geoextra]

Unfortunately, the Spotlight integration didn't fix the issue for me (tested with @sentry/sveltekit 7.86.0). My stacktrace is identical to the original issue description.

[geoextra]

However, this seems to be fixed when migrating to SvelteKit v2.