DOMParser is not defined at defaultParseHtml

3 replies
Last updated: Dec 3, 2020
Hi again! Ive been trying to use
@sanity/block-tools
and i keep getting this error:
ReferenceError: DOMParser is not defined
    at defaultParseHtml (***/studio/node_modules/@sanity/block-tools/lib/HtmlDeserializer/helpers.js:173:35)
Happens on my own code as well as the example code provided in the packages readme, here:
https://github.com/sanity-io/sanity/blob/next/packages/%40sanity/block-tools/README.md I am running the script through
sanity exec
Im puzzled
😭
AI Update

Good news - this is a common issue with a straightforward solution! The DOMParser is not defined error occurs because @sanity/block-tools relies on browser APIs like DOMParser to parse HTML, but when you're running code in Node.js (which is what sanity exec does), these browser APIs don't exist.

The fix is to provide a custom parseHtml function that uses a Node.js-compatible DOM parser like jsdom. Here's how to do it:

1. Install jsdom:

npm install jsdom

2. Provide a custom parseHtml function:

When you call htmlToBlocks, you need to pass a parseHtml option that uses jsdom instead of the browser's DOMParser:

import {htmlToBlocks} from '@sanity/block-tools'
import {JSDOM} from 'jsdom'

const blockContentType = // your schema type definition

const html = '<p>Your HTML content here</p>'

const blocks = htmlToBlocks(html, blockContentType, {
  parseHtml: (htmlString) => new JSDOM(htmlString).window.document
})

The key is the parseHtml option - it tells @sanity/block-tools to use jsdom's DOM implementation instead of expecting a browser environment.

Why this happens:

The README example shows the basic usage, but doesn't explicitly mention that you need jsdom for Node.js environments. The defaultParseHtml function in the package (the one throwing your error at helpers.js:173:35) assumes it's running in a browser where DOMParser is globally available.

As mentioned in Sanity's migration course, this is a standard setup when using @sanity/block-tools in Node.js contexts like scripts, migrations, or sanity exec commands. The package is designed to work in both browser and Node.js environments, but you need to provide the DOM polyfill for Node.js yourself.

The HTML-deserialization is done by default by the browser's native DOMParser. On the server side you can give the function 
parseHtml
 that parses the html into a DOMParser compatible model / API.
https://github.com/sanity-io/sanity/tree/next/packages/%40sanity/block-tools#parsehtml
if you're running it on the server, you need to npm/yarn install some DOM parser like jsdom and use that
That makes complete sense! And you just got rid of my error - thanks a ton! 🍻

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Was this answer helpful?