如何在NuxtJS中使用DOMPurify？报错“default.a.sanitize is not a function”

报错核心原因 #

该报错由两个典型问题导致：

• DOMPurify的ES模块导出适配存在兼容问题，webpack打包时默认导入没有正确挂载sanitize方法
• Nuxt SSR服务端渲染阶段不存在浏览器window对象，DOMPurify依赖DOM环境无法在服务端正常执行

修复方案 #

1. 调整导入方式

将原有默认导入写法替换为命名空间导入：

// 替换原来的 import DOMPurify from "dompurify"
import * as DOMPurify from 'dompurify'

如果上述写法仍报错，可改用CommonJS导入写法：

const DOMPurify = require('dompurify')

2. 适配Nuxt SSR环境

DOMPurify仅能在客户端运行，可任选以下一种方式处理：

• 方案1：包裹客户端标签
  在引用该表单组件的父组件/页面中，用<client-only>标签包裹组件：

<client-only>
  <UploadForm />
</client-only>

• 方案2：运行环境判断
  在计算属性中增加客户端环境判断，服务端渲染时直接返回空值：

computed: {
  compiledMarkdown() {
    // 非客户端环境直接返回
    if (!process.client) return ''
    const clean = DOMPurify.sanitize(this.formValues.title, {
      USE_PROFILES: { html: true },
    });
    return marked(clean);
  },
}

3. 可选简化方案

直接使用Nuxt官方封装的DOMPurify模块，无需手动处理适配问题：

1. 安装依赖：npm install @nuxtjs/dompurify
2. 在nuxt.config.js中配置模块：

export default {
  modules: [
    '@nuxtjs/dompurify'
  ],
  dompurify: {
    default: {
      USE_PROFILES: { html: true }
    }
  }
}

3. 组件中直接调用内置API，无需手动导入DOMPurify：

const clean = this.$dompurify.sanitize(this.formValues.title)

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