How I accidentally shipped my source maps (and why ignore files matter)

SwapnilH Patil — Thu, 02 Apr 2026 14:28:52 +0000

The Day I Shipped My Source Maps 😅

So, it happened. I was using Claude to help streamline an npm package update. In the hustle of moving fast, the AI "helpfully" updated my package but included .map files in the production build.

It wasn’t a disaster, but it was a wake-up call. When we automate our workflows with AI, we tend to overlook the "boring" configuration files. But those files are actually our human-critical safety nets.

The "Big Three" of Privacy & Performance

If you want to keep your builds clean and your source code structure private, you need to master these three files:

1. `.gitignore` 🛡️

Your first filter. It tells Git which files or folders to strictly ignore so they are never tracked or uploaded to your repo.

What to include: node_modules, .env secrets, and local logs.

2. `.npmignore` 📦

Critical for library authors. If this file exists, npm uses it instead of .gitignore to determine what stays out of your published package.

The Claude Lesson: If you don't define this, npm might default to your git rules, which often leads to accidentally publishing raw source or source maps (.map files) that you don't want in the final package.

3. `.vercelignore` ⚡

Essential for deployment efficiency. It tells Vercel exactly what to skip during the build process to speed up your CI/CD pipelines.

Pro-Tip: The "Files" Array

Instead of playing "Whack-a-Mole" with .npmignore, use the files property in your package.json. This acts as a whitelist, only allowing specific folders (like dist or build) to be published.


json
{
  "name": "my-cool-package",
  "files": [
    "dist"
  ]
}

A fully-featured React loader overlay component

SwapnilH Patil — Wed, 01 Apr 2026 14:18:02 +0000

I got tired of copy-pasting loading overlay code between React projects — so I published it as an npm package.

how many times have you written something like this?

const [isLoading, setIsLoading] = useState(false);

// then somewhere... a semi-transparent div, a spinner, z-index battles,
// position: fixed, you know the drill.

yeah. same.

so I built loader-overlay — a simple React component that wraps your content and handles all of that for you.

getting started:

npm install loader-overlay

then in your component:

import LoaderOverlay from 'loader-overlay';

function MyPage() {
  const [loading, setLoading] = useState(false);

  return (
    <LoaderOverlay active={loading}>
      <YourContent />
    </LoaderOverlay>
  );
}

that's genuinely it. no 15-step config, no provider wrapping your whole app, no style clashes.

I built this because the existing options were either too heavy or too rigid. loader-overlay is intentionally small and flexible — use your own spinner, scope it to a section, or go full page. your call.

try it out, open an issue, send a PR — all welcome.

loader-overlay

react #javascript #npm #opensource #showdev #webdev

DEV Community: SwapnilH Patil