When you build a React app with Vite, it automatically generates source maps — files that let your browser map compiled code (like index-abcd123.js) back to your original React source (App.jsx).
This is great for debugging, but not always ideal for production builds, where you may want to:
Let’s explore how to control source map generation in a Vite + React project, with examples and real behavior differences.
🧩 What Are Source Maps?
When Vite bundles your React code, it compiles and minifies everything into optimized JS files like this:
function App(){console.log("Button clicked!")}export{App as default};
That’s unreadable — but your browser’s DevTools can use a .map file (like index-abcd123.js.map) to map errors and console logs back to your original JSX source.
Without source maps, errors in production will point to something like:
index-abcd123.js:1:10243
With source maps enabled, they show:
App.jsx:5:11
⚙️ Controlling Source Maps in Vite
Open your vite.config.js file and configure the build.sourcemap option.
✅ Example: Disable Source Maps in Production
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig(({ mode }) => {
const isProduction = mode === 'production'
return {
plugins: [react()],
build: {
sourcemap: !isProduction,
},
}
})
Explanation:
In development (npm run dev), sourcemap is true, so you can debug easily.
In production (npm run build), sourcemap is false, so .map files are not generated.
🧪 Example: Simple React Component
src/App.jsx
export default function App() {
const handleClick = () => {
console.log('Button clicked! 🔘')
throw new Error('Demo error!')
}
return (
<div style={{ padding: 20 }}>
<h1>Hello Vite + React 👋</h1>
<button onClick={handleClick}>Click me</button>
</div>
)
}
🧰 Development Mode (npm run dev)
In dev mode, Vite automatically enables source maps.
If you click the button and trigger an error, you’ll see:
Error: Demo error!
at handleClick (App.jsx:5:11)
You can open DevTools → Sources tab, and see the actual src/App.jsx file, just like your editor.
✅ Perfect for debugging.
🚀 Production Mode (npm run build + vite preview)
In production mode, since sourcemap: false, your dist/ folder will look like:
dist/
├── assets/
│ ├── index-xyz123.js
│ ├── index-xyz123.css
├── index.html
No .map files appear.
Now, when an error happens in production, your browser shows:
Error: Demo error!
at Object.onclick (index-xyz123.js:1:17245)
No mention of App.jsx — just the minified output.
That means your original source isn’t exposed.
🛡️ Why Disable Source Maps in Production?
Protect your source code
.map files often include your original JSX, comments, and variable names — valuable intellectual property.
Reduce build size
.map files can be large (sometimes larger than your JS bundle).
Improve security
Prevents attackers from reverse-engineering your logic directly from production builds.
⚖️ Optional: Hide Source, Keep Trace Info
If you still want debugging info but don’t want to expose source content:
build: {
sourcemap: true,
sourcemapExcludeSources: true,
}
This keeps .map files but excludes your original code — so errors still have line numbers, but no readable source.
🔍 Quick Summary
| Mode | Command | Sourcemap | Behavior |
| Development | npm run dev | ✅ Yes | Easy debugging |
| Production | npm run build | ❌ No | Secure, optimized build |
| Optional | — | ⚙️ sourcemapExcludeSources: true | Keeps maps, hides code |
💬 Final Thoughts
Disabling source maps in production is a small but powerful optimization — your build gets smaller, safer, and faster.
Meanwhile, you still keep full debugging comfort during development.
For most React projects using Vite, the snippet below is all you need:
build: { sourcemap: process.env.NODE_ENV !== 'production' }
