Angular 18 SSR使用isomorphic-dompurify为何出现运行时类型错误？

问题背景 #

在 Angular 18 SSR 项目中安装 isomorphic-dompurify@^2.15.0 后，使用标准调用代码可正常构建：

import DOMPurify from "isomorphic-dompurify";
DOMPurify.sanitize(dirtyHtml);

但运行时触发以下错误：

[vite] Error when evaluating SSR module /main.server.mjs:
|- TypeError: Cannot convert undefined or null to object
    at Function.getPrototypeOf (<anonymous>)
    at node_modules/whatwg-url/lib/utils.js (C:...\angular\cache\18.2.1\vite\deps_ssr\isomorphic-dompurify.js:19369:41)     
    at __require2 (C:...\angular\cache\18.2.1\vite\deps_ssr\chunk-2FDURXR6.js:51:50)
    at node_modules/whatwg-url/lib/URL.js (C:...\angular\cache\18.2.1\vite\deps_ssr\isomorphic-dompurify.js:22241:17)       
    at __require2 (C:...\angular\cache\18.2.1\vite\deps_ssr\chunk-2FDURXR6.js:51:50)
    at node_modules/whatwg-url/webidl2js-wrapper.js (C:...\angular\cache\18.2.1\vite\deps_ssr\isomorphic-dompurify.js:22648:16)
    at __require2 (C:...\angular\cache\18.2.1\vite\deps_ssr\chunk-2FDURXR6.js:51:50)
    at node_modules/whatwg-url/index.js (C:...\angular\cache\18.2.1\vite\deps_ssr\isomorphic-dompurify.js:22662:9)
    at __require2 (C:...\angular\cache\18.2.1\vite\deps_ssr\chunk-2FDURXR6.js:51:50)
    at node_modules/jsdom/lib/api.js (C:...\angular\cache\18.2.1\vite\deps_ssr\isomorphic-dompurify.js:141933:21)

该问题与 Angular 15 Universal 中出现的同类未解决问题逻辑一致。

可行解决方案 #

1. 区分客户端/服务端导入逻辑 #

由于 isomorphic-dompurify 在服务端依赖 jsdom，而 Vite SSR 对 Node.js 模块的打包处理存在兼容性问题，可通过环境判断手动初始化：

let DOMPurify: any;

// 服务端环境手动初始化 DOMPurify + JSDOM
if (typeof window === 'undefined') {
  const { JSDOM } = require('jsdom');
  const dompurify = require('dompurify');
  DOMPurify = dompurify(new JSDOM('').window);
} else {
  // 客户端直接使用 isomorphic-dompurify
  DOMPurify = require('isomorphic-dompurify');
}

// 使用示例
const sanitizedHtml = DOMPurify.sanitize(dirtyHtml);

2. 配置 Vite SSR 外部化依赖 #

将 jsdom、whatwg-url 等 Node.js 模块标记为外部依赖，避免 Vite 打包时对其进行转译处理：
在项目根目录的 vite.config.ts 中添加配置：

import { defineConfig } from 'vite';
import angular from '@angular-devkit/build-angular/src/vite/index';

export default defineConfig({
  plugins: [angular()],
  ssr: {
    external: ['jsdom', 'whatwg-url']
  }
});

3. 降级 isomorphic-dompurify 版本 #

尝试降级至 2.12.x 版本，部分用户反馈该版本在 Angular SSR 环境中兼容性更好，可通过以下命令安装：

npm install isomorphic-dompurify@2.12.0

内容的提问来源于stack exchange，提问作者Alex Pappas