javascript - Next.js DOMPurify.sanitize() 显示 TypeError : dompurify__WEBPACK_IMPORTED_MODULE_6___default. a.sanitize 不是函数

标签 javascript next.js server-side-rendering dompurify

我正在使用 DOMPurify.sanitize()里面 dangerouslySetInnerHTML={{}}显示 innerHtml从数据库返回。对于最初的目的,我使用 getServersideProps()next-redux-wrapper对于这个页面。
我安装了 dompurify:npm i -S dompurify ,当前版本为:“^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;
但是当我用 npm run dev 运行它时我收到此错误:TypeError: dompurify__WEBPACK_IMPORTED_MODULE_1___default.a.sanitize is not a function .
这里有什么问题?我尝试使用更简单的代码,但一切都显示相同的错误!我究竟做错了什么?

最佳答案

使用Isomorphic dompurify
它可以在服务器端和浏览器上呈现

关于javascript - Next.js DOMPurify.sanitize() 显示 TypeError : dompurify__WEBPACK_IMPORTED_MODULE_6___default. a.sanitize 不是函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65646007/

相关文章:

javascript - 如果我在页面上有滚动效果并且用户要么缩小要么分辨率大怎么办?

reactjs - 服务器端的条件渲染

reactjs - 类型错误 : (0 , import_jsx_dev_runtime.jsxDEV) 不是一个函数

javascript - React SSR 闪烁页面

javascript - window.location.href 在 Meteor 中不起作用

javascript - 未捕获的 TypeError : Module. cwrap 不是函数

javascript - cypress 测试运行时无法加载 map 和 css 的图 block

reactjs - (Material UI/Next.js) 从服务器端渲染停止 useStyles

javascript - 使用无服务器框架将 NextJS 应用程序部署到 AWS 时出错

javascript - 如何将 React Epub 阅读器与 next js 集成