Ad blockers can blank your React site if a file is called CookieConsent

A client's site worked on our machines and went completely blank for some visitors. No error in the console, the server answered 200, and the page came back after a reload, sometimes. The cause was a file name.

What happened

The cookie banner lived in a component called CookieConsent.jsx and was loaded lazily. Brave, and other browsers with cookie-notice filter lists, block requests whose URL contains strings like "cookieconsent" or "cookie-consent", because that is how the banner scripts of tracking vendors are named. To the blocker, our own component looked exactly like a third-party script.

The only symptom was "Failed to fetch dynamically imported module". Since the app could not load one of its own chunks, React never rendered at all. Worse, filter lists download a few seconds after a fresh browser profile starts, so the first visit often worked and the second did not.

The fix

Rename the file and anything that ends up in a URL: PrivacyNotice.jsx instead of CookieConsent.jsx, a neutral CSS class name, a neutral chunk name. The site came back for everyone at once.

Names to keep out of file, chunk and class names

• cookie, consent, gdpr
• ads, advert, banner (in some lists)
• analytics, tracking, tracker, pixel

If a headless browser screenshot comes back blank, restart it with a fresh profile before assuming the app is broken: the filter lists may simply have finished downloading between runs.