`gatsby build` Fails for Production Build Due to Use of `DOMParser()` in Code

Reproduction steps

Step 1: Run gatsby build Step 2: Observe the failure during the HTML build phase. Step 3: Debug the issue by reviewing the logs and error messages related to DOMParser() usage.

NOTE: Failure occurs during the build phase, not runtime.

Expected Results

The Gatsby build should complete successfully, and the site should be generated without errors.

Actual Results

The Gatsby build fails due to the usage of DOMParser(), which is a browser API unavailable during Gatsby's static HTML build phase.

$ gatsby build
...
failed Building static HTML for pages - 2.301s

 ERROR #95313  HTML.COMPILATION

Building static HTML failed for path "/blog/14/"

See our docs page for more info on this error: https://gatsby.dev/debug-html

  34 |
  35 |                     const htmlContent = childrenAsciidoc[0].html;
> 36 |                     const parser = new DOMParser();
     |                                    ^
  37 |                     const parsedHtml = parser.parseFromString(htmlContent, "text/html");
  38 |                     function extractTextNodes(element, textNodes) {
  39 |                         if (element.nodeType === Node.TEXT_NODE) {

  WebpackError: ReferenceError: DOMParser is not defined

  - blog-list-template.js:36 
    jenkins-gatsby-blog/src/templates/blog-list-template.js:36:36

  - blog-list-template.js:27 
    jenkins-gatsby-blog/src/templates/blog-list-template.js:27:37

  - ChildMapping.js:17 
    [jenkins-gatsby-blog]/[react-transition-group]/esm/utils/ChildMapping.js:17:4

  - ChildMapping.js:19 
    [jenkins-gatsby-blog]/[react-transition-group]/esm/utils/ChildMapping.js:19:1

  - isHostComponent.js:6 
    [jenkins-gatsby-blog]/[@mui]/base/utils/isHostComponent.js:6:1

  - ChildMapping.js:17 
    [jenkins-gatsby-blog]/[react-transition-group]/esm/utils/ChildMapping.js:17:4

  - ChildMapping.js:19 
    [jenkins-gatsby-blog]/[react-transition-group]/esm/utils/ChildMapping.js:19:1

  - isHostComponent.js:6 
    [jenkins-gatsby-blog]/[@mui]/base/utils/isHostComponent.js:6:1

  - ChildMapping.js:28 
    [jenkins-gatsby-blog]/[react-transition-group]/esm/utils/ChildMapping.js:28:1

  - isHostComponent.js:1 
    [jenkins-gatsby-blog]/[@mui]/base/utils/isHostComponent.js:1:1

  - isHostComponent.js:6 
    [jenkins-gatsby-blog]/[@mui]/base/utils/isHostComponent.js:6:1

  - ChildMapping.js:19 
    [jenkins-gatsby-blog]/[react-transition-group]/esm/utils/ChildMapping.js:19:1

  - isHostComponent.js:6 
    [jenkins-gatsby-blog]/[@mui]/base/utils/isHostComponent.js:6:1

  - ChildMapping.js:19 
    [jenkins-gatsby-blog]/[react-transition-group]/esm/utils/ChildMapping.js:19:1

  - isHostComponent.js:6 
    [jenkins-gatsby-blog]/[@mui]/base/utils/isHostComponent.js:6:1

Anything else?

Upon investigation, it appears the issue is caused by Gatsby being a static site generator that doesn’t have access to browser-specific APIs like DOMParser() during the build phase. Refer to this document for more context: Gatsby Debugging HTML Builds.

jenkins-infra / docs.jenkins.io