🧭 How to Disable Source Maps in Vite + React (and Why You Might Want To)

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:

• Reduce bundle size

• Hide original source code

• Speed up build times

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, // ✅ Enabled in dev, disabled in prod
    },
  }
})

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?

1. Protect your source code
   .map files often include your original JSX, comments, and variable names — valuable intellectual property.

2. Reduce build size
   .map files can be large (sometimes larger than your JS bundle).

3. 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

---

💬 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' }