Issue with Importing Element Type in a Cheerio Scraper Project

When using Cheerio Scraper, you may encounter a type import issue: "Namespace has no exported member 'Element'." This error often occurs in Cheerio versions 1.0.0-rc.12 and above. Below is a detailed explanation of the cause and how to resolve it.
Root Cause
Cheerio, as a widely-used HTML parsing library, relies internally on the domhandler module to process DOM elements. In earlier versions, Cheerio directly exposed core types such as Element. However, as modularity improved, these types were moved to the underlying domhandler module. This change was made to adhere to better architectural design principles—separating core type definitions from their implementation.
How to Resolve?
Here are two solutions you can consider:
1.Direct Import
Import the DOMHandler types directly, as shown in the following TypeScript example:

import { Element } from 'domhandler';
import * as cheerio from 'cheerio';
const $ = cheerio.load('<div><p class="greet">Hello</p><p class="target">World</p></div>');
const pElement = $('p.target')[0] as Element;
console.log(`Find an element <${pElement.tagName}> whose class is "${pElement.attribs.class}"`);

2.Version Locking
In certain scenarios where migrating to the new type import method is temporarily challenging for the project, consider locking the Cheerio version:

{ "dependencies": { "cheerio": "1.0.0-rc.10" } } 

Summary
The architectural evolution of Cheerio reflects modern JavaScript library design trends, which include the following aspects:
1.Separation of Concerns: Decoupling core type definitions from the library's implementation.
2.Modular Design: Allowing users to import only the necessary parts, thereby reducing bundle size.
3.Type Safety: Enhancing TypeScript type-checking efficiency through explicit type import paths.
As a low-level library, domhandler focuses on parsing and representing the DOM, while Cheerio builds on it to provide a higher-level, jQuery-style API.