Javascript Next.js domprify.sanitize（）显示TypeError:domprify\uuuu WEBPACK\u IMPORTED\u MODULE\u6\uuuuuuu default.a.sanitize不是函数

我正在使用

domprify.sanitize（）

inside

dangerlysetinerhtml={{{}}

来显示从数据库返回的

innerHtml

。出于最初的目的，我将

getServersideProps（）

与

next redux包装一起用于此页面

我安装DOMPrify时使用了：
npm I-S DOMPrify
，当前版本为“^2.2.6”

我的代码：

    import DOMPurify from 'dompurify';
    import { useSelector } from 'react-redux';
    import { END } from 'redux-saga';
    import wrapper from '../redux/storeSetup';

    const EmployeePage = () => {
    
        const blog = useSelector(state => state.data);

        const html_body = blog[0].body_html;
    
        const clean = DOMPurify.sanitize(html_body);
    
        return(
           <div className="mainContainer">
                <div dangerouslySetInnerHTML ={{ __html: clean }} />
                <ul>
                    {blog.map((item) => (
                        <li key={item.author}>
                            <span>{item.author}</span><br/>
                            <span>{item.title}</span>
                            <h4>{item.body_delta}</h4>
                            <p>{item.body_html}</p>
                            <p>{item.created_on}</p>
                        </li>
                    ))}
                </ul>
            </div>
        );
    }

    export const getServerSideProps = wrapper.getServerSideProps( async ({store}) => {
        store.dispatch({type: GET_DATA});
        store.dispatch(END);
        await store.sagaTask.toPromise();    
    });
    export default EmployeePage;

从“domprify”导入domprify；
从'react redux'导入{useSelector}；
从“redux saga”导入{END}；
从“../redux/storeSetup”导入包装器；
const EmployeePage=（）=>{
constblog=useSelector（state=>state.data）；
const html_body=blog[0]。body_html；
const clean=domprify.sanitize（html\u body）；
返回(

{blog.map（（项目）=>(

{item.author}

{item.title}
{item.body_delta}
{item.body_html}

{item.created_on}


))}

);
}
export const getServerSideProps=wrapper.getServerSideProps（异步（{store}）=>{
dispatch（{type:GET_DATA}）；
存储调度（结束）；
wait store.sagaTask.toPromise（）；
});
导出默认EmployeePage；

但是，当我使用
npm run dev
运行此程序时，会出现以下错误：
TypeError:domprify\uuu WEBPACK\u IMPORTED\u MODULE\u 1\uuuuu\u default.a.sanitize不是一个函数

这里怎么了？我尝试使用更简单的代码，但所有代码都显示相同的错误！我做错了什么？
根据这一点：

请尝试以下操作（来自上面的示例）：

我找到了一个有效的解决方案：在提交富格文本博客之后，我没有在服务器端清理innerHtml，而是在客户端清理它，在我的例子中，
react quill
：

import dynamic from 'next/dynamic'
import {useState} from 'react'
import DOMPurify from 'dompurify';

const QuillNoSSRWrapper = dynamic(import('react-quill'), {
    ssr: false,
    loading: () => <p>Loading...</p>,
})

// quill modules definitions
//...

export default function articles() {
    const [text, setText] = useState(preData);

    function handleTextChange(content, delta, source, editor) {
        //let str = JSON.stringify(editor.getContents());
        //let parsed = JSON.parse(str)
        setText(editor.getContents());
        const cleaned = DOMPurify.sanitize(editor.getHTML());
        console.log('Cleaned Html: ', cleaned);

    return (
        <div className="quill_container">
            <div id="editor" className="editor">
                <QuillNoSSRWrapper
                    id="quilleditor"
                    modules={modules}
                    formats={formats}
                    theme="snow"
                    value={text}
                    onChange={handleTextChange}
                  />
             </div>
        </div>
    );
};

从“下一个/动态”导入动态
从“react”导入{useState}
从“domprify”导入domprify；
const quillnossrwraper=dynamic（导入（'react-quill'）{
ssr：错，
加载：（）=>加载…
，
})
//纬管模定义
//...
导出默认函数项目（）{
const[text，setText]=useState（preData）；
函数handleTextChange（内容、增量、源、编辑器）{
//让str=JSON.stringify（editor.getContents（））；
//让parsed=JSON.parse（str）
setText（editor.getContents（））；
const cleaned=domprify.sanitize（editor.getHTML（））；
log（'Cleaned Html:'，Cleaned）；
返回(
);
};
使用

它可以在服务器端和浏览器上渲染
已安装的jsdom并运行，它显示以下内容：
未找到模块：无法解析“子进程”
！jsdom方法是否可用于生产？
import dynamic from 'next/dynamic'
import {useState} from 'react'
import DOMPurify from 'dompurify';

const QuillNoSSRWrapper = dynamic(import('react-quill'), {
    ssr: false,
    loading: () => <p>Loading...</p>,
})

// quill modules definitions
//...

export default function articles() {
    const [text, setText] = useState(preData);

    function handleTextChange(content, delta, source, editor) {
        //let str = JSON.stringify(editor.getContents());
        //let parsed = JSON.parse(str)
        setText(editor.getContents());
        const cleaned = DOMPurify.sanitize(editor.getHTML());
        console.log('Cleaned Html: ', cleaned);

    return (
        <div className="quill_container">
            <div id="editor" className="editor">
                <QuillNoSSRWrapper
                    id="quilleditor"
                    modules={modules}
                    formats={formats}
                    theme="snow"
                    value={text}
                    onChange={handleTextChange}
                  />
             </div>
        </div>
    );
};