This block is creating an Issue while building the project with Angular v19 and CapacitorJs v7

[kwebdev11]

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch beasties@0.3.2 for the project I'm working on.

Here is the diff that solved my problem:

diff --git a/node_modules/beasties/dist/index.cjs b/node_modules/beasties/dist/index.cjs
index 4c3cbe2..2a16283 100644
--- a/node_modules/beasties/dist/index.cjs
+++ b/node_modules/beasties/dist/index.cjs
@@ -211,13 +211,15 @@ function createDocument(html) {
  const document = htmlparser2.parseDocument(html, { decodeEntities: false });
  extendDocument(document);
  extendElement(domhandler.Element.prototype);
  let beastiesContainer = document.querySelector("[data-beasties-container]");
+ if(typeof document !== 'undefined' && document.documentElement && typeof document.documentElement.setAttribute === 'function'){
    if (!beastiesContainer) {
        document.documentElement?.setAttribute("data-beasties-container", "");
        beastiesContainer = document.documentElement || document;
    }
+ }
  document.beastiesContainer = beastiesContainer;
  buildCache(beastiesContainer);
  return document;
}
@@ -190,21 +190,23 @@ function buildCache(container) {
   classCache = /* @__PURE__ */ new Set();
   idCache = /* @__PURE__ */ new Set();
   const queue = [container];
   while (queue.length) {
     const node = queue.shift();
+    if (node) {//Add additional null check for node before accessing
        if (node.hasAttribute?.("class")) {
            const classList = node.getAttribute("class").trim().split(" ");
            classList.forEach((cls) => {
                classCache.add(cls);
            });
        }
        if (node.hasAttribute?.("id")) {
            const id = node.getAttribute("id").trim();
            idCache.add(id);
        }
        if ("children" in node) {
            queue.push(...node.children.filter((child) => child.type === "tag"));
        }
+    }
   }
}

<em>This issue body was [partially generated by patch-package](https://github.com/ds300/patch-package/issues/296).</em>

[danielroe]

Any chance you can provide a reproduction? 🙏

[daverickdunn]

I can't share the code to replicate, but it's a new Angular 20.3.9 project with multiple libs and apps. Serve works fine, but build fails with:

[error] TypeError: document.documentElement?.setAttribute is not a function
    at createDocument (D:\core_ACR_238\node_modules\beasties\dist\index.cjs:217:31)
    at BeastiesExtended.process (D:\core_ACR_238\node_modules\beasties\dist\index.cjs:536:22)
    at InlineCriticalCssProcessor.process (D:\core_ACR_238\triton\node_modules\@angular\build\src\utils\index-file\inline-critical-css.js:181:40)
    at D:\core_ACR_238\triton\node_modules\@angular\build\src\utils\index-file\index-html-generator.js:137:64
    at IndexHtmlGenerator.runPlugins (D:\core_ACR_238\triton\node_modules\@angular\build\src\utils\index-file\index-html-generator.js:71:34)
    at IndexHtmlGenerator.process (D:\core_ACR_238\triton\node_modules\@angular\build\src\utils\index-file\index-html-generator.js:57:18)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async executePostBundleSteps (D:\core_ACR_238\triton\node_modules\@angular\build\src\builders\application\execute-post-bundle.js:50:62)
    at async executeBuild (D:\core_ACR_238\triton\node_modules\@angular\build\src\builders\application\execute-build.js:229:24)
    at async watch (D:\core_ACR_238\triton\node_modules\@angular\build\src\builders\application\index.js:110:24)

Current workaround is to disable inlineCritical in angular.json:

"optimization": {
    "scripts": true,
    "styles": {
        "minify": true,
        "inlineCritical": false
    },
    "fonts": true
}

I prompted Claude for a RCA and it provided this explanation, hope it helps:

Based on my deep investigation, I can now provide you with a comprehensive analysis of this beasties error.

  Root Cause Analysis

  The Error

  The error TypeError: document.documentElement?.setAttribute is not a function occurs at line 217 in the beasties library during
   the critical CSS inlining phase of ng build.

  Technical Deep-Dive

  Beasties Code Flow (node_modules/beasties/dist/index.cjs:211-222):
  let extended = false; // MODULE-SCOPED FLAG

  function extendElement(element) {
    if (extended) {
      return; // EARLY RETURN ON SUBSEQUENT CALLS
    }
    extended = true;
    Object.defineProperties(element, {
      setAttribute: { value(name, value) { ... } },
      // ... other DOM methods
    });
  }

  function createDocument(html) {
    const document = htmlparser2.parseDocument(html, { decodeEntities: false });
    extendDocument(document);
    extendElement(domhandler.Element.prototype); // Extends prototype
    // ...
    document.documentElement?.setAttribute(...); // FAILS HERE
  }

  The Core Issue

  The problem lies in a design flaw in beasties' module-scoped extended flag:

  1. First HTML file processed: extended = false → extends domhandler.Element.prototype → sets extended = true ✅
  2. Second HTML file processed: extended = true → skips extending prototype → but if domhandler.Element.prototype was
  reset/replaced, setAttribute doesn't exist ❌

  Why It Only Happens During Build

  - ng serve: Processes HTML once per page load, then uses the extended prototype
  - ng build: Processes multiple HTML outputs (index.html plus potentially other generated HTML files) in sequence within the
  same Node.js process

  Contributing Factors

  Based on my research, this is a known issue with beasties/critters in Angular builds:

  - GitHub Issue #25419 and #25429 document this exact error
  - Originally occurred in Angular 16.1.0, was "fixed" in PR #25584 (v16.1.6)
  - However, you're on Angular 20.3.9, suggesting either:
    - A regression in newer Angular versions
    - A configuration-specific trigger
    - Or a variant of the original issue

[danielroe]

that's helpful.

given that it's new Angular 20.3.9 project, can you try to reproduce? I can think of a couple of ways to resolve but need to be able to test them, and I'm not familiar with Angular.