DOMParser Server Side

[summer bobcat]

Hi Kapa. Im trying to use DOMParser in frontmatter: const parser = new DOMParser()

I get: DOMParser is not defined

Is there a way to use DOMParser server side?

[fiery sequoia]

Hi @summer bobcat. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

The error you're encountering is expected behavior in Astro. Web APIs like DOMParser are not available in server-side code, including the frontmatter of Astro components.

In Astro v3.0, partial shims for Web APIs in server code were completely removed. As mentioned in the documentation:

Astro v3.0 removes these partial shims entirely. Web APIs are no longer available in server-rendered code.
Upgrade to Astro v3

This is similar to the error you might see with other browser-specific objects:

This error occurs when trying to access document or window on the server.
Troubleshooting Guide

Solutions

You have a few options to work with DOMParser:

1. Move the code to a client-side script: Place your DOMParser code in a <script> tag outside the frontmatter. This will run on the client where DOMParser is available.

2. Use the client:only directive: If you need to use DOMParser in a component, you can use the client:only directive to ensure it only runs on the client.

3. Use a server-compatible alternative: For parsing HTML on the server, you could use a Node.js compatible package like jsdom or node-html-parser instead of DOMParser.

4. Fetch and parse remote Markdown: If you're trying to parse Markdown content, consider using a dedicated Markdown parser as shown in the documentation:

import { marked } from 'marked';
const response = await fetch('<https://example.com/some-markdown.md'>);
const markdown = await response.text();
const content = marked.parse(markdown);

Remember that Astro components run on the server by default, so browser-specific APIs won't be available in the component frontmatter.

I hope this helps clarify why you're seeing this error and provides some alternatives!

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: