DEV Community

Cover image for The Missing GitHub Icon That Broke My Production Build
Alkhassim Lawal Umar
Alkhassim Lawal Umar

Posted on

The Missing GitHub Icon That Broke My Production Build

#devchallenge #bugsmash

Summer Bug Smash: Smash Stories 🐛🛹

This is a submission for DEV's Summer Bug Smash: Smash Stories powered by Sentry.

The setup

I'm building KingxTech, and specifically K-XpertAI — an AI agent that reads, writes, and deletes files in a live project workspace, then hosts the result instantly. Under the hood it's a React 19 + Vite frontend talking to a TypeScript/Express backend on Cloud Run.

I'd just shipped a big batch of changes to the workspace UI — a proper code editor, a file tree with GitHub import/export buttons, a terminal tab. Pushed to GitHub, Vercel kicked off the deploy... and it failed.

The bug 

Error: Command "npm run build" exited with 1
Enter fullscreen mode Exit fullscreen mode

Digging into the build log, the real error was buried a few lines down:

15 │ import { File as FileIcon, Folder, FolderPlus, FilePlus, Trash2, Save,
   │   RefreshCw, Undo2, Copy, ExternalLink, Code2, Eye, Rocket,
   │   TerminalSquare, Upload, Maximize2, Minimize2, Github, FolderInput,
   │   SlidersHorizontal, Info, Plus } from "lucide-react";
   │ ───┬──
   │ ╰──── Missing export
Enter fullscreen mode Exit fullscreen mode

Vite's bundler (via Rolldown) was telling me Github didn't exist as an export in lucide-react — but only in Vercel's build. It worked fine in local dev. That's the kind of bug that makes you doubt your own eyes: the icon was clearly imported the same way as a dozen others on that same line that worked perfectly.

The investigation

First instinct: check the installed version.

"lucide-react": "^1.23.0"
Enter fullscreen mode Exit fullscreen mode

Nothing obviously wrong there. So instead of guessing at what icon names should exist, I installed that exact version in an isolated sandbox and just asked the module directly:

const icons = require('lucide-react');
const names = ['Github', 'FolderInput', 'SlidersHorizontal', /* ...the rest */];
for (const n of names) {
  console.log(n, typeof icons[n] !== 'undefined' ? 'OK' : 'MISSING');
}
Enter fullscreen mode Exit fullscreen mode 
Github MISSING
FolderInput OK
SlidersHorizontal OK
...everything else OK
Enter fullscreen mode Exit fullscreen mode

There it was. Every icon in that import worked except Github.

The root cause

lucide-react — like a lot of modern icon libraries — has been progressively removing brand/trademark logos (GitHub, Twitter, etc.) from its default export set, pushing people toward dedicated brand-icon packages instead. Somewhere between versions, the plain Github icon quietly stopped being exported. Local dev didn't catch it because of caching in node_modules from an earlier install; a clean Vercel build (fresh npm install every time) surfaced it immediately.

The fix wasn't "install a different package" — it was small enough to just inline:

// Before: relying on a brand icon that no longer ships
import { Github } from 'lucide-react';

// After: a tiny local SVG component instead
function Github({ size = 14 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor">
      <path d="M12 .5C5.7.5.5 5.7.5 12c0 5.1 3.3 9.4 7.9 10.9..." />
    </svg>
  );
}
Enter fullscreen mode Exit fullscreen mode

Same component name, same usage everywhere else in the file — zero call-site changes needed.

Verifying it, not just eyeballing it

Since the whole failure was "works locally, fails in CI," I didn't trust a visual read of the diff. I ran the actual production build in a clean environment:

npm install
npm run build
Enter fullscreen mode Exit fullscreen mode 
✓ 1902 modules transformed.
dist/index.html                     1.44 kB
dist/assets/index-*.css            24.68 kB
dist/assets/index-*.js           1,185.88 kB
✓ built in 3.16s
Enter fullscreen mode Exit fullscreen mode

Clean exit code, real dist/ output. Only then did I consider it actually fixed.

What I'm taking away

  • A missing export is a build-time contract violation, not a typo — treat it like one. Don't guess at what a package should export; ask it.
  • Local dev green ≠ CI green. Stale node_modules can hide exactly this class of bug. A clean install is the only honest test.
  • Brand icons in open-source icon libraries are not guaranteed to stay. If your UI depends on a company's logo shape, either pin the package version deliberately or just own a tiny inline SVG — it's one function, and it never breaks on you again.

Small bug, but a good reminder that "it built yesterday" is not evidence of anything today.

Top comments (0)