Debugging a React Bug That Wasn't Mine: A Dev's Breakdown

Hey there! I'm Abhijeet, a dev who just spent an entire day pulling his hair out over a bug that turned out to be... not my bug at all. Grab some popcorn, maybe a debugger too, because this is the story of how Brave browser gaslit me and my console cried in minified.

Let's dive into the rabbit hole, one console error at a time.

Everything Was Fine... Until It Wasn't

So I'm vibing, building this slick React project using Vite. Nothing fancy, just your average component soup with some nice icons sprinkled in.

I deployed it on Netlify, excited to finally show it off. Opened it in Brave browser, loaded the app, and boom:

🚨 Icons ghosted me.

🚨 Text went poof.

🚨 Console dropped this bomb:

      Uncaught Error: Minified React error #130

If you've ever seen this, you know React is basically saying:

"I broke. You figure it out."

I clicked the link React provided and it told me:

      Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

Translation: You're probably importing a component that doesn't exist. Classic. But I double-checked all my imports...

Fun fact: This all went down while building FlickNest — a movie discovery app where you can search trending titles, explore binge-worthy shows, and keep up with the latest releases.

🎬 FlickNest — Live link

It Must Be the Icons

Naturally, I thought maybe I messed up icon imports. React #130 is infamous for this.


import { FaXTwitter } from "react-icons/fa6"; // ✅

Still the error stayed, and so did my growing headache.

I swapped out react-icons for lucide-react, thinking maybe Brave didn't like the old icon set. You know, new icons, new luck?

Spoiler: no luck.

Clearly, this wasn't about icons anymore. This was personal.

Brave is Blocking My Files?

Then I noticed something odd in DevTools. The error trace pointed to a file named: ads.914af30a.js

The name. "ads"? Like, ads-ads?

Instant flashback: Brave hates anything that even smells like an ad. Could it be blocking my own JS chunks?

So I popped open my vite.config.ts and told Vite:

"Hey buddy, let's name things like cryptographic garbage instead of triggering Brave's fight-or-flight."

Here's the config:


// vite.config.ts
  build: {
    rollupOptions: {
      output: {
        chunkFileNames: 'assets/[hash].js',      // Dynamic chunks
        entryFileNames: 'assets/[hash].js',      // Entry points
        assetFileNames: 'assets/[hash][extname]' // Assets like CSS/images
      }
    }
  }

This ensures Vite won't generate scary filenames like ads.chunk.js. Totally browser-friendly.

I rebuilt. Refreshed. And guess what?
Still broken.

The Plot Twist I Didn't See Coming

Out of desperation, I clicked the error trace again — this time determined to follow every breadcrumb. I expanded the stack trace in DevTools, expecting to see something from my source files.

But instead, I noticed a weird nested structure:

content script > CSS Peeper > ads.[hash].js

Hold up. CSS Peeper?

That's a Chrome/Brave extension I use to peek at styles. Apparently, it injects its own React app into every webpage like it owns the place.
And that app... was crashing.

Let me repeat:

I had been debugging someone else's React crash.
For. Eight. Hours.

The Real Villain Was Installed in My Browser All Along

Here's what was really happening:

CSS Peeper injects its own React-powered UI into every webpage
It loads a script called something like ads.something.js (coincidence? I think not.)
That script broke. Probably missing an icon or internal dependency
React saw the crash and yelled
But the console blamed my app
To make things worse, Brave saw the filename ads.[hash].js and probably flagged or throttled it due to its aggressive ad-blocking rules — even though it wasn't an actual ad.

Plot twist: I wasn't the villain. I was just collateral damage.

The Fix (That Took Me 5 Seconds... After 8 Hours)

The fix? Comically simple:

Open brave://extensions
Turn off CSS Peeper
Reload the page

Boom. Everything just worked.
Icons? Back. Text? Back. Me? Slightly traumatized.

What I Learned (So You Don't Lose a Day Like Me)

Test in Incognito Mode First
No extensions = no hijinks. This should be your first debugging step when things get weird.
Minified Errors Are Gaslighting You
Use dev mode for real errors: npm run dev

React will be way more helpful when it's not trying to save bytes.
Be Careful With File Names
Browsers like Brave can block:

- JS/CSS files named ads.js, sponsor.css, etc.

- DOM elements with classes like .ad-banner

Even if they're not ads. So avoid those terms when naming stuff.

Double-Check Icon Imports

My imports were fine, but always verify


import { ChevronLeft } from 'lucide-react';
console.log(ChevronLeft); // Should not be undefined

Look for "content script" in DevTools
If you see "content script" or an extension name in the error stack, it's probably not your fault.

TL;DR

Seeing React error #130 in Brave? Icons or text gone missing?
Before you nuke your app:

Try Incognito mode
Check if any extensions are crashing
Avoid ad-looking file names

Sometimes the real bug lives rent-free in your browser.

Final Thoughts

I lost an entire day to an error that wasn't mine. But now you don't have to.

If you're ever staring at your DevTools wondering what went wrong — remember to ask yourself:

"Is this me? Or is this just Brave being Brave?"

Happy debugging. 🚀