Don't assume the value you pass is the value that arrives — where a value can carry a special meaning, check it on the receiving side

As of 2026-10. Verified with JavaScript String.prototype.replace, the Base UI (React) toggle group, and the Next.js 16 App Router.

Your build script inlines a bundled JavaScript file into an HTML template with html.replace('<!--APP-->', js). The page is blank and the console shows a single syntax error. You give the "All" button of a filter value="", and the whole list disappears while your analytics shows a strange string like base-ui-_r_12_. You write export { revalidate } from './og' so two routes share one cache setting, and only one of them obeys it. None of these throw an error.

Why does the value that arrives differ from the value you passed?

Libraries reserve special meanings for certain values, and when you pass one, they act on that meaning instead of raising an error. From the library's point of view nothing went wrong, so there is no warning even though what arrived is not what you sent. Wherever a special meaning can apply, log the actual value on the receiving side, and pass the value in a form that avoids the special meaning.

Special meanings come in three common shapes:

• Symbols — $&, $`, $', $1 in replacement strings; . and * in regular expressions; * and $ in shells; % and _ in SQL LIKE
• Empty values — components that read an empty string, null or undefined not as "no value" but as "fill this in for me"
• How the value is read — configuration that tools read statically, without running your code. At runtime it is the same value; the tool simply cannot see it

What goes wrong when you replace text with a large string?

When the second argument of String.prototype.replace(pattern, replacement) is a string, the sequences $& (the match), $` (text before the match) and $' (text after it) inside it are interpreted as replacement patterns (MDN). Minified bundles contain these sequences often. The head of your HTML gets copied into the middle of your JavaScript, and the whole script dies with a syntax error — so even your diagnostic code never runs, and you are left with a blank page.

Pass a function as the second argument; its return value is inserted literally.

// Risky: $& $` $' inside js become replacement patterns
html.replace('<!--APP-->', js)
// Safe: a function's return value is inserted as-is
html.replace('<!--APP-->', () => js)

The same trap exists elsewhere: user input inside a regular expression, a filename inside a shell command, a search term inside SQL LIKE. When the value is a large blob or something someone else gave you rather than a short string you typed, assume it contains symbols.

What happens when you pass an empty value?

Some UI components generate their own unique id when value is empty. In React's Base UI toggle group (ToggleGroup), an item with value="" reports an auto-generated id shaped like base-ui-_r_NN_ when selected, not an empty string (the Base UI toggle group docs do not describe this). Convert that with Number() and you get NaN; price <= NaN is always false, so every item is filtered out. The screen just says "no results".

For choices that mean "no value" — "All", "Any", "No limit" — use a name instead of an empty string.

<ToggleGroupItem value="all">All</ToggleGroupItem>
<ToggleGroupItem value="100">Up to $100</ToggleGroupItem>
// Receiving side: only use it as a number after checking its shape
const limit = v === 'all' ? null : Number(v)
if (limit !== null && !Number.isFinite(limit)) return // drop unknown values

Why is a re-exported config ignored?

Next.js App Router route segment config (revalidate, dynamic, and so on) is found by the build tool reading the file statically (Next.js docs). At runtime export { revalidate } from './other' is the same value, but static analysis only sees constants written directly in that file. If it cannot find one, it silently falls back to the default. Functions and components can be re-exported; config constants must be written in each route file.

// Write it directly in both app/opengraph-image.tsx and app/twitter-image.tsx
export const revalidate = false
export { default, alt, size, contentType } from './og' // functions and metadata can be shared

How do you check places where a special meaning can apply?

1. Ask at every hand-off — does this argument give special meaning to symbols, empty values, or static reading? Look for "special", "reserved" or "default" sections in the docs
2. Log the receiving side — look at the value that arrived, not the one you sent, in logs, analytics events or build output. Strange strings (auto ids, copied HTML) are the clue
3. Pass it in a form that avoids the special meaning — a function for replacement, a name for "empty", config written in each file
4. Validate what you receive before using it — Number.isFinite for numbers, an allow-list for choices
5. Guard against zero results with a test — turn "zero items after filtering" or "built config equals the default" into a warning

What happened to us

• Inlining a bundle into HTML: we exported a 3D scene as a single HTML file and the model never appeared. A $` inside the bundle had become a replacement pattern and pasted the HTML head into the middle of the script. Switching to () => js fixed it.
• An empty toggle value: choosing "no upper limit" on a map screen showed zero places. The base-ui-_r_ string recorded in the analytics filter-value field led us to the cause.
• Re-exported config: two preview-image routes shared their config through a re-export, and one of them quietly ran on defaults. It took three separate work sessions to pin the same spot down.