The Problem

Source maps map minified production JavaScript back to the original source code. Without them, debugging in production shows unreadable minified code with all variables named a, b, c.

Symptoms

  • DevTools shows minified code (e.g., a.b(c)) instead of original source
  • Breakpoints do not hit the correct lines
  • Stack traces show minified file names and line numbers
  • Source map files exist but DevTools does not load them

Real Error Message

bash
DevTools failed to load source map: Could not load content for
https://example.com/main.abc123.js.map: HTTP error: status code 404

How to Fix It

Fix 1: Enable Source Maps in Vite

javascript
// vite.config.js
export default defineConfig({
  build: {
    sourcemap: true, // Generates .map files
    // OR for hidden source maps (not exposed to browser)
    sourcemap: 'hidden'
  }
});

Fix 2: Enable Source Maps in Webpack

javascript
// webpack.config.js
module.exports = {
  mode: 'production',
  devtool: 'source-map', // Full source maps
  // OR: devtool: 'hidden-source-map'
};

Fix 3: Enable Source Maps in Terser (Minifier)

javascript
// webpack.config.js
module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          sourceMap: true
        }
      })
    ]
  }
};

Fix 4: Verify Source Map Reference in JS File

bash
# Check if the minified file references the source map
tail -1 dist/main.abc123.js
// Should end with: //# sourceMappingURL=main.abc123.js.map

Fix 5: Enable Source Maps in DevTools

  1. 1.Open Chrome DevTools (F12)
  2. 2.Go to Settings (gear icon)
  3. 3.Under "Sources", check "Enable JavaScript source maps"
  4. 4.Check "Enable CSS source maps"
  5. 5.Refresh the page

Fix 6: Server Configuration for .map Files

nginx
# Ensure .map files are served with correct MIME type
location ~* \.map$ {
  add_header Content-Type application/json;
  add_header Cache-Control "public, max-age=31536000";
}

Fix 7: Security Consideration

javascript
// For production, consider 'hidden-source-map'
// This generates .map files but does NOT add the reference to the JS
// You can upload .map files to your error tracking service (Sentry, etc.)
// without exposing source code to the public

Upload to Sentry:

bash
sentry-cli releases files 1.0.0 upload-sourcemaps ./dist