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

When you build a React app with [Vite](https://vitejs.dev/), [it](https://vitejs.dev/) 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 [alwa](https://vitejs.dev/)ys ideal for **production builds**, where you may want to:

* Reduce bundle size
    
* Hide original s[ourc](https://vitejs.dev/)e code
    
* Speed up [bui](https://vitejs.dev/)ld times
    

Let’s explore [how](https://vitejs.dev/) to **control source m**[**ap g**](https://vitejs.dev/)**eneration** in a Vite + React project, with examples and real behavior differences.

---

## 🧩 What Are Source Maps?

When Vite b[undl](https://vitejs.dev/)es your React code, it [com](https://vitejs.dev/)piles and minifies everything into optimized JS files like this:

```javascript
function App(){console.log("Button clicked!")}export{App as default};
```

That’s unreadable — but your browser’[s De](https://vitejs.dev/)vTools can use a `.map` file (like [`index-abcd123.js.map`](http://index-abcd123.js.map)) to map errors and console logs back to your **original JSX source**.

Without source maps, errors in produc[tion](https://vitejs.dev/) will point to something like:

```bash
index-abcd123.js:1:10243
```

With source maps enabled, they show:

```bash
App.jsx:5:11
```

---

## ⚙️ Controlling Source Maps in Vite

O[pen](https://vitejs.dev/) your `vite.config.js` file and con[figu](https://vitejs.dev/)re the `build.sourcemap` option.

### ✅ Example: Disable Source Maps in Pro[duct](https://vitejs.dev/)ion

```javascript
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 r`[`un d`](https://vitejs.dev/)`ev`), `sourcem`[`ap` i](https://vitejs.dev/)s `true`, so you can debug easily.
    
* In **production (**`npm run build`), `source`[`map`](https://vitejs.dev/) is `false`, so `.map` files are not generated.
    

---

## 🧪 Example: Simple React Component

`s`[`rc/A`](https://vitejs.dev/)`pp.jsx`

```javascript
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**](https://vitejs.dev/) **mode**, Vite automatically enabl[es s](https://vitejs.dev/)ource maps.

If you click the button and trigger a[n er](https://vitejs.dev/)ror, you’ll see:

```bash
Error: Demo error!
    at handleClick (App.jsx:5:11)
```

You can open DevTools → **Sources tab**, [and](https://vitejs.dev/) see the actual `src/App.jsx` file, just like your editor.

✅ Perfect for debugging.

---

## 🚀 Product[ion](https://vitejs.dev/) Mode (`npm run build` + `v`[`ite`](https://vitejs.dev/) `preview`)

In **production mode**, since `sourcemap:` [`fals`](https://vitejs.dev/)`e`, your `dist/` folder will look like:

```bash
dist/
 ├── assets/
 │    ├── index-xyz123.js
 │    ├── index-xyz123.css
 ├── index.html
```

No `.map` files appear.

Now, when an e[rror](https://vitejs.dev/) happens in product[ion,](https://vitejs.dev/) your browser shows:

```bash
Error: Demo error!
    at Object.onclick (index-xyz123.js:1:17245)
```

No mention of `App.jsx` — just the mini[fied](https://vitejs.dev/) output.  
That means your original source isn’t exposed.

---

## 🛡️ Why Disable Source Maps in Produc[tion](https://vitejs.dev/)?

1. **Protect your source code**  
    `.map` files o[ften](https://vitejs.dev/) include your original JSX, comments, and variable names — valuable intellectual property.
    
2. **Reduce build size**  
    `.map` files can be l[arge](https://vitejs.dev/) (sometimes larger than your JS bundle).
    
3. **Improve security**  
    Prevents attackers f[rom](https://vitejs.dev/) reverse-engineering your logic directly from production builds.
    

---

## ⚖️ Optional: Hide Source, Keep Trace [Info](https://vitejs.dev/)

If you still want debugging info but [don’](https://vitejs.dev/)t want to expose source content:

```bash
build: {
  sourcemap: true,
  sourcemapExcludeSources: true,
}
```

This keeps `.map` files but **excludes yo**[**ur o**](https://vitejs.dev/)**riginal code** — so errors still have line numbers, but no readable source.

---

## 🔍 Quick Summary

| Mode | Command | [S](https://vitejs.dev/)ourcemap | Behav[ior](https://vitejs.dev/) |
| --- | --- | --- | --- |
| [Dev](https://vitejs.dev/)elopmen[t](https://vitejs.dev/) | `npm run` [`dev`](https://vitejs.dev/) | ✅ Yes | [Ea](https://vitejs.dev/)sy debuggin[g](https://vitejs.dev/) |
| Producti[on](https://vitejs.dev/) | `npm` [`run`](https://vitejs.dev/) `build` | ❌ No | [Se](https://vitejs.dev/)cure, opti[mize](https://vitejs.dev/)d build |
| [Opti](https://vitejs.dev/)onal | — | ⚙️ `sourcemapExcludeS`[`ourc`](https://vitejs.dev/)`es: true` | K[eeps](https://vitejs.dev/) maps, hides code |

---

## 💬 Final [Thou](https://vitejs.dev/)ghts

Disabling source m[aps](https://vitejs.dev/) in production i[s a](https://vitejs.dev/) **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, t[he s](https://vitejs.dev/)nippet below is all you need:

```bash
build: { sourcemap: process.env.NODE_ENV !== 'production' }
```