Vite source map options

Note that the options below only affect the output of vite build. The Vite dev server always serves source maps for transformed files, regardless of the build.sourcemap setting.

The options

false (default)

No source maps are generated.

true

A separate .map file is written next to each chunk and the chunk ends with a comment pointing to it such as //# sourceMappingUrl=main.js.map.

hidden

Source maps are generated but they aren’t referenced in any comments like //# sourceMappingUrl= so that browsers don’t know that they exist.

This option is useful if you want the sourcemaps for tools like Sentry but don’t want to expose them on production in which case you can do something like this:

• Set the build.sourcemap option to inline.
• Upload the build and sourcemaps to Sentry and then delete the sourcemaps.
• The production build now only includes the compiled code and no source maps but if you get any errors, Sentry has access to the source maps so it can show better stack traces.

An example config might look like:

import { sentryVitePlugin } from '@sentry/vite-plugin'

export default defineConfig({
  build: { sourcemap: 'hidden' },
  plugins: [
    sentryVitePlugin({
      org: 'your-org',
      project: 'your-project',
      authToken: process.env.SENTRY_AUTH_TOKEN,
      sourcemaps: { filesToDeleteAfterUpload: ['./dist/**/*.map'] },
    }),
  ],
})

inline

The source map is added as a Base64-encoded string as a data URI at the end of the chunk so that it looks something like this:

function add(n,d){return n+d}
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLC...

The source map will be downloaded by every user so the chunk files can get much bigger. Mostly used for environments where source maps are needed but can’t be loaded as a separate file.

Which one should I use?

You’ll usually want to use the inline option on production builds.

Links

• build.sourcemap – Vite docs