[Vite] No auth token provided in dev/watch mode warning

[cleptric]

On https://docs.sentry.io/platforms/javascript/guides/vue/sourcemaps/uploading/vite/, we mention

The Sentry Vite plugin doesn’t upload source maps in watch-mode/development-mode. We recommend running a production build to test your configuration.

However, running vite, I get the following output.

❯ npm run dev

> dev
> vite

[sentry-vite-plugin] Warning: No auth token provided. Will not create release. Please set the `authToken` option. You can find information on how to generate a Sentry auth token here: https://docs.sentry.io/api/auth/
[sentry-vite-plugin] Warning: No auth token provided. Will not upload source maps. Please set the `authToken` option. You can find information on how to generate a Sentry auth token here: https://docs.sentry.io/api/auth/

[owenjs]

It seems:

Vite doesn't load .env files by default

So I needed to follow Vite's guide on how to use Environment variables within their config file

Not sure if this has changed recently but this plugin's example is wrong.

[lforst]

@owenjs I don't think any bundler loads .env files by default. I also don't think our example is wrong. If you wanna use vite's way of accessing environment configuration you have to do that, otherwise (as it says in those docs) "Environmental Variables can be obtained from process.env as usual".

@cleptric thanks for raising this, will fix.

[franklinjavier]

Using loadEnv did the trick https://main.vitejs.dev/config/#using-environment-variables-in-config Thank you

[jonrandahl]

For future visitors,

Using loadEnv did the trick https://main.vitejs.dev/config/#using-environment-variables-in-config

Following franklinjavier & owenj's approach is how I got this to work in my dev instance, if it helps anyone else then job done! 😁

Logging out env allowed me to see all of my vars were loaded but I didn't need to use process or import.meta to access them pass them into my configuration:

export default defineConfig(({ command, mode }) => {
  // Load env file based on `mode` in the current working directory.
  // Set the third parameter to '' to load all env regardless of the
  // `VITE_` prefix.
  const env = loadEnv(mode, process.cwd(), '')
  // console.log({env})

  return {
    plugins: [
      vue(),
      // Put the Sentry vite plugin after all other plugins
      sentryVitePlugin({
        org: env.SENTRY_ORG,
        project: env.SENTRY_PROJECT,
        authToken: env.SENTRY_AUTH_TOKEN,
      }),
    ],
   [...]

Hope this helps you too! 👍