dompurify__webpack_imported_module_2___default(...).sanitize is not a function

🎀 문제 상황

pages/home/ui/main-banner-swiper.tsx

import DOMPurify from 'dompurify';

...

<p
  dangerouslySetInnerHTML={{
    __html: DOMPurify.sanitize(banner.description),
  }}
/>

dompurify__webpack_imported_module_2___default(...).sanitize is not a function

dangerouslySetInnerHTML의 사용으로 XSS 위험에 노출되었기 때문에
돔 퓨리파이를 사용하였는데, 위와 같은 오류 발견.

모든 dompurify 사용처에서 위와 같은 오류가 나진 않았고, swiper 사용한 곳에서 났음

🎀 해결 방법

pages/home/home-page.tsx

import dynamic from 'next/dynamic';

const MainBannerSwiper = dynamic(() => import('./ui/main-banner-swiper').then((module) => module.MainBannerSwiper), {
	ssr: false,
});

...

<MainBannerSwiper mainBannerList={mainBannerData} />

DOMPurify는 브라우저 환경에서 동작하는 라이브러리로, 서버 환경에서는 제대로 동작하지 않을 수 있다.
아마 Swiper라는 클라이언트 사이드 라이브러리와 함께 사용하는 바람에, SSR과의 충돌로 인해 DOMPurify의 sanitize 함수가 정의되지 않는 문제가 발생했던 것 같다.

Next.js의 dynamic 함수를 사용하여 해당 컴포넌트를 클라이언트 사이드에서만 렌더링하도록 설정함으로써 이 문제를 해결할 수 있었다.

혹은 JSDom이라는 라이브러리를 같이 써보자.

관련 외부 포스팅 바로가기