Upgrade to Astro 7

👋 Intro

BrainByteZ has been upgraded to Astro 7. 🚀

The upgrade itself was straightforward, but I had to fix two small issues afterwards: a stricter MDX parsing error during the production build and a whitespace change caused by Astro 7’s new JSX-style HTML compression.

1️⃣ Step 1: Run -> bunx @astrojs/upgrade

astro   Integration upgrade in progress.

        @astrojs/check is up to date on v0.9.9
        @astrojs/rss is up to date on v4.0.18
        @astrojs/sitemap is up to date on v3.7.3
        astro will be updated from v6.4.8 to v7.0.3
        @astrojs/mdx will be updated from v6.0.3 to v7.0.0

wait    Some packages have breaking changes. Continue?
        Yes

check   Be sure to follow the CHANGELOGs.
        astro Upgrade to Astro v7
        @astrojs/mdx CHANGELOG

        Installing dependencies with bun...

Houston:
Can't wait to see what you build.

The upgrade updated Astro and the official integrations to versions that support Astro 7.

At the time of writing this site uses:

astro: 7.0.3
@astrojs/mdx: 7.0.0
@astrojs/check: 0.9.9
@astrojs/rss: 4.0.18
@astrojs/sitemap: 3.7.3

2️⃣ Step 2: Run -> bun run build

After the upgrade I ran the production build:

bun run build

This runs astro check first and then astro build.

The type check passed without errors, but the Vite build failed while processing MDX content.

[ERROR] [vite] ✗ Build failed
28:3: Unexpected character after `<`, expected a valid JSX tag (note: to create a link in MDX, use `[text](url)`) (mdx-jsx:unexpected-character)

3️⃣ Step 3: Fix stricter MDX parsing

The error was caused by MDX syntax that worked before, but is now parsed more strictly.

The project pages contained Astro components with the closing > on a new line, followed by the component text:

<LinkButton
  external
  icon="github"
  loading="lazy"
  href="https://github.com/BrainB0ne/plainmd"
>Available on GitHub</LinkButton>

In Astro 7’s MDX build pipeline, this multiline component syntax failed to compile. Moving the closing > back onto the final prop line fixed the MDX JSX parse error, but it introduced another issue: Markdown autolink parsing could treat part of the href attribute and the button text as a URL inside the component slot.

The robust fix was to keep the component text as an explicit MDX string expression:

<LinkButton
  external
  icon="github"
  loading="lazy"
  href="https://github.com/BrainB0ne/plainmd">{"Available on GitHub"}</LinkButton>

I also removed angle brackets around plain URLs in GPL license code blocks:

-along with this program.  If not, see <https://www.gnu.org/licenses/>.
+along with this program.  If not, see https://www.gnu.org/licenses/.

After these MDX changes the production build completed successfully.

4️⃣ Step 4: Fix JSX-style whitespace handling

Astro 7 also changed the default whitespace handling. The default value of compressHTML changed from true to "jsx".

This means Astro now strips whitespace using JSX rules by default, similar to frameworks like React. One small issue showed up in an inline text/link combination.

Before:

<p>
  A new home for
  <Link external href="https://www.brainbytez.nl">
    BrainByteZ
  </Link>
</p>

With the new whitespace handling, the rendered text could lose the space between for and BrainByteZ. I fixed it by keeping the inline text and link on the same line:

<p>
  A new home for <Link external href="https://www.brainbytez.nl">BrainByteZ</Link>
</p>

This keeps the intended space explicit and avoids depending on HTML-style whitespace preservation around inline components.

5️⃣ Step 5: Result

The Astro 7 upgrade is now live on BrainByteZ.

Final verification:

bun run build

Result:

Result (55 files):
- 0 errors
- 0 warnings
- 0 hints

[build] 71 page(s) built
[build] Complete!

The build now succeeds without errors.

The official upgrade guide is available here: Upgrade to Astro v7.

Buy Me a Coffee

Ko-fi