You’re writing MDX and your build suddenly crashes: [@mdx-js/rollup] Could not parse expression with acorn. Followed by Unexpected content after expression. Frustrating, right?
The culprit: curly braces ({}) or LaTeX math blocks ($$) that the MDX compiler mistakes for JavaScript expressions. Here’s why that happens and how to fix it — fast.
- The Cause: The MDX parser treats curly braces (
{}) outside code blocks as JSX JavaScript expressions. When the compiler evaluates math formulas or regular prose containing braces, it fails to parse them as executable code. - Immediate Fix: Replace literal curly braces with standard HTML character entities (
{and}) in your text. - Scalable Fix: Configure a custom Rehype/Remark markdown plugin to automatically sanitize and escape mathematical blocks at build-time.
Why Braces Crash the Build
MDX is markdown that can also run JSX components. So the compiler treats everything inside {} as JavaScript:
MDX Compilation Logic:
"Prose text { literal } prose" --> [MDX Parser] --> [Acorn AST Compiler] --> Treats "{ literal }" as JavaScript!
|
Acorn Parser Fails here!Write something like CSS variables use the var(--name) syntax and the compiler feeds --name into Acorn (a JavaScript parser). Spoiler: --name is not valid JS. Crash.
Step 1: Escape Braces With HTML Entities
Fastest fix: replace { and } with HTML entities. The HTML parser resolves them after MDX compilation, so Acorn never sees them.
| Raw Character | MDX Entity Representation |
|---|---|
{ (Open Brace) | { |
} (Close Brace) | } |
What crashes:
To define a CSS variable, declare it inside the root selector:
:root {
--theme-color: #3b82f6;
}Acorn sees { and tries to parse --theme-color: #3b82f6; as JavaScript. It fails. Build breaks.
What works:
To define a CSS variable, declare it inside the root selector:
:root {
--theme-color: #3b82f6;
}The HTML entities { and } get resolved into { and } after MDX compilation. Acorn never sees them. Build stays green.
Step 2: Handle Formulas and Special Notation
LaTeX blocks with braces will crash the compiler if they aren’t wrapped or escaped. Here’s what’s safe and what isn’t.
Fenced Code Blocks — Safe
MDX ignores everything inside standard code blocks. They get parsed as raw strings, so braces inside them never reach Acorn:
// Totally safe in MDX
const user = { name: "Darsh" };Need to show a YAML config or a CI/CD pipeline snippet? Wrap it in a fenced code block. You’re good.
Double-Dollar Math Blocks — Crash Risk
$$ math blocks look like this in LaTeX:
$$ \text{Profit} = (\text{Visitors} \times \text{Yield}) - \text{Cost} $$If the content inside has curly braces, Acorn will try to parse it as JavaScript and fail.
The workaround: skip LaTeX and write your equations as plain markdown instead:
- Net Profit = (Visitors × Average Earnings Per Visitor) − Total Traffic Cost
- Net Profit = (10,000 × $0.06) − $500.00 = $100.00
Same information, zero curly braces, zero crashes.
Step 3: Auto-Escape With Compiler Plugins
If you have hundreds of posts with math formulas, escaping every brace by hand gets old fast. Better approach: add remark-math and rehype-katex to your compiler pipeline. These plugins parse math blocks into safe HTML nodes before Acorn ever touches them.
Install:
pnpm add remark-math rehype-katexThen register them in your Astro config:
// astro.config.mjs
import { defineConfig } from 'astro/config';
import mdx from '@astrojs/mdx';
import remarkMath from 'remark-math';
import rehypeKatex from 'rehype-katex';
export default defineConfig({
integrations: [
mdx({
remarkPlugins: [remarkMath],
rehypePlugins: [rehypeKatex]
})
]
});Once that’s in place, you can write standard LaTeX with braces directly in your MDX. No crashes. No manual escaping. For a related exploration of rendering visual elements dynamically in modern web contexts, see my previous hands-on guide on Exporting HTML Canvas to Images using Native JavaScript.
Frequently Asked Questions
Can I escape curly braces using backslashes?
No. In regular markdown, \{ works as an escape. In MDX, the backslash passes through literally — Acorn still sees the raw brace. You must use { and } instead.
Why do some curly braces work without escaping?
If the content inside {} happens to be valid JavaScript (like an empty object {}), Acorn compiles it fine. But most prose isn’t valid JS, so it crashes. This isn’t a bug you can rely on — use entities.
Does this error affect Next.js pages?
Yes. The MDX spec is the same across Astro, Next.js, and Gatsby. If you’re using @mdx-js/loader or @mdx-js/rollup, you’ll hit the same Acorn crashes with unescaped braces.
Related Articles
Deepen your understanding with these curated continuations.
Best Ad Networks as Google Ads Alternatives in 2026: A Publisher's Guide
Compare the top 9 Google AdSense alternatives for 2026. Detailed breakdown of Mediavine, Raptive, Ezoic, Monumetric, and more. Traffic requirements, CPMs, and which network fits your niche.
Showcasing Premium MDX Features
Explore premium MDX features on MeshWorld including interactive callouts, custom components, enhanced typography, and rich media integration. A showcase of modern content creation capabilities with Astro and MDX.
Which Search Engines Support IndexNow? Complete Guide
Find out which search engines support IndexNow, how they share submitted URLs, and how it impacts AI search engines like ChatGPT.
