{"id":10996,"library":"hast-util-from-dom","title":"hast-util-from-dom","description":"hast-util-from-dom is a utility package designed to convert a DOM tree (either from a browser's native DOM or headless environments like JSDOM) into a HAST (Hypertext Abstract Syntax Tree) HTML syntax tree. It is part of the unified ecosystem for processing text. The current stable version is 5.0.1, which is ESM-only and requires Node.js 16 or newer. It typically follows the release cadence of the wider unified ecosystem. Key differentiators include its small size, primary suitability for browser environments, and its explicit choice *not* to provide positional information, which distinguishes it from more comprehensive parsing solutions. It serves as the inverse to `hast-util-to-dom` and is wrapped by `rehype-dom-parse` for HTML parsing with DOM APIs. While efficient for its purpose, users should be aware that it might yield varying results in different or older browsers.","status":"active","version":"5.0.1","language":"javascript","source_language":"en","source_url":"https://github.com/syntax-tree/hast-util-from-dom","tags":["javascript","dom","hast-util","hast","html","rehype","unist","utility","util","typescript"],"install":[{"cmd":"npm install hast-util-from-dom","lang":"bash","label":"npm"},{"cmd":"yarn add hast-util-from-dom","lang":"bash","label":"yarn"},{"cmd":"pnpm add hast-util-from-dom","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Package is ESM-only since v5.0.0. CommonJS `require()` is not supported.","wrong":"const fromDom = require('hast-util-from-dom')","symbol":"fromDom","correct":"import { fromDom } from 'hast-util-from-dom'"},{"note":"This is a TypeScript type for configuring the `fromDom` function. Use `import type`.","wrong":"import { Options } from 'hast-util-from-dom'","symbol":"Options","correct":"import type { Options } from 'hast-util-from-dom'"},{"note":"This is a TypeScript type for the callback hook. Use `import type`.","wrong":"import { AfterTransform } from 'hast-util-from-dom'","symbol":"AfterTransform","correct":"import type { AfterTransform } from 'hast-util-from-dom'"}],"quickstart":{"code":"import { fromDom } from 'hast-util-from-dom';\nimport { JSDOM } from 'jsdom';\n\nconst htmlContent = `\n \n Example\n \n \n
Hi
\n
Hello, world!
\n \n \n`;\n\nconst dom = new JSDOM(htmlContent);\nconst document = dom.window.document;\n\n// Select an element from the simulated DOM\nconst mainElement = document.querySelector('main');\n\nif (mainElement) {\n // Transform the DOM element into a hast tree\n const hast = fromDom(mainElement);\n\n // Log the resulting hast tree structure\n console.log(JSON.stringify(hast, null, 2));\n} else {\n console.error('Main element not found in the DOM.');\n}\n","lang":"typescript","description":"Demonstrates converting a DOM element (from JSDOM in Node.js) into a HAST tree."},"warnings":[{"fix":"Migrate your project to use ES modules (`import`/`export`) or use a tool like `esm.sh` for browser environments. Ensure your Node.js version is 16 or newer.","message":"Version 5.0.0 changed the package to be ESM-only and requires Node.js 16+. Old CommonJS `require()` statements will no longer work.","severity":"breaking","affected_versions":">=5.0.0"},{"fix":"Update your `@types/hast` and other `@types/*` dependencies to their latest versions to ensure compatibility with `hast-util-from-dom@5`.","message":"Version 5.0.0 updated `@types/hast` and utilities, requiring users to update their own dependencies and potentially adjust type usages.","severity":"breaking","affected_versions":">=5.0.0"},{"fix":"Always pass a valid DOM node (`DomNode`) to the `fromDom` function. Ensure the input is not `null` or `undefined`.","message":"Version 5.0.0 removed undocumented support for passing no node to `fromDom`. It now strictly requires valid input.","severity":"breaking","affected_versions":">=5.0.0"},{"fix":"Ensure that the input DOM tree corresponds to a valid HTML document. If you need to handle non-HTML doctypes, consider older versions or alternative parsers.","message":"Version 4.0.0 removed support for non-HTML doctypes, focusing solely on HTML transformations.","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"If positional information is critical, consider using `rehype-parse` which typically generates full positional data.","message":"This utility does not provide positional information (line, column numbers) for the generated HAST nodes. If you require source mapping or detailed error reporting based on position, this utility is not suitable.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Thoroughly test the output of `hast-util-from-dom` in all targeted browser environments, particularly if supporting legacy browsers.","message":"Results can vary in different (especially older) browser environments due to inconsistencies in DOM API implementations. While designed for browser use, testing across target browsers is recommended.","severity":"gotcha","affected_versions":">=2.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Change your import statement to `import { fromDom } from 'hast-util-from-dom';`. Ensure your environment supports ES modules.","cause":"Attempting to use `require()` to import `hast-util-from-dom` in an ES module context or Node.js >=16 with `type: \"module\"` set.","error":"TypeError: require is not a function"},{"fix":"Ensure your Node.js project is configured correctly for ES modules, typically by using `.mjs` files or setting `\"type\": \"module\"` in your `package.json`. If you are in a CJS context, you might need to use dynamic `import()` or adjust your module resolver configuration.","cause":"This usually indicates a problem with module resolution in Node.js 16+ due to `hast-util-from-dom` using the `exports` field.","error":"Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'hast-util-from-dom' imported from ..."},{"fix":"Add a check to ensure the DOM node you are passing is not `null` or `undefined` before calling `fromDom`, e.g., `const element = document.querySelector('some-selector'); if (element) { fromDom(element); }`","cause":"You are passing `null` or `undefined` to the `fromDom` function, which expects a valid DOM node.","error":"Argument of type 'null' is not assignable to parameter of type 'DomNode'."}],"ecosystem":"npm"}