react-draft-wysiwyg와 Next.js (SSR)에서 “window is not defined” 오류 문제 해결

제목: react-draft-wysiwyg와 Next.js에서 “window가 정의되지 않음” 오류 해결하기

Next.js를 사용하여 SSR(서버 사이드 렌더링)을 위해 일반 HTML을 편집기 콘텐츠로 변환하는 리치 텍스트 편집기 작업 중 “window가 정의되지 않음” 에러가 발생하면 혼란스러울 수 있습니다. 일반적으로 이 오류는 react-draft-wysiwyg 라이브러리를 Next.js와 함께 사용할 때 발생하는데, 이는 클라이언트 측에서만 사용 가능한 window 객체에 접근하려고 하기 때문입니다.

문제 이해하기

Next.js에서 서버 측에서 컴포넌트를 렌더링할 때, 브라우저의 window 객체에 의존하는 기능을 사용할 수 없습니다. 이는 react-draft-wysiwyg와 같은 종속성에 해당하며, 이러한 종속성은 DOM을 직접 조작하려고 하며 브라우저별 API에 의존합니다.

해결책 1: 동적 임포트 사용하기

이 문제를 해결하기 위한 일반적인 접근 방법은 Next.js에서 제공하는 동적 임포트 기능을 활용하는 것입니다. react-draft-wysiwyg 에디터 컴포넌트를 동적으로 임포트하고 “ssr: false”로 표시하여 클라이언트 측에서만 로드되도록 할 수 있습니다.

import dynamic from 'next/dynamic';

const Editor = dynamic(
  () => import('react-draft-wysiwyg').then(mod => mod.Editor),
  { ssr: false }
);

이 해결책은 Next.js가 react-draft-wysiwyg 에디터 컴포넌트의 서버 사이드 렌더링을 건너뛰도록 하여, window 관련 오류를 방지합니다.

해결책 2: 로더 구성

“ModuleParseError”와 “Unexpected token”과 함께 여전히 문제가 발생하는 경우, 해당 파일 유형에 대한 적절한 로더를 구성해야 할 수도 있습니다.

Next.js 프로젝트에서 적절한 로더가 설치되어 있는지 확인하고 올바르게 구성되어 있는지 확인하세요. react-draft-wysiwyg 모듈을 올바르게 처리하도록 파일 유형에 특정 로더를 구성해야 할 수도 있습니다.

모두 적용하기

다음은 동적 임포트 솔루션을 결합한 예시로, Next.js 프로젝트에서 react-draft-wysiwyg 에디터 컴포넌트를 사용하는 방법을 보여줍니다:

import React, { Component } from 'react';
import { EditorState } from 'draft-js';
import dynamic from 'next/dynamic';

const Editor = dynamic(
  () => import('react-draft-wysiwyg').then(mod => mod.Editor),
  { ssr: false }
);

class MyEditor extends Component {
  constructor(props) {
    super(props);
    this.state = { editorState: EditorState.createEmpty() };
  }

  onEditorStateChange = (editorState) => {
    this.setState({ editorState });
  };

  render() {
    const { editorState } = this.state;

    return (
      <div>
        <Editor
          editorState={editorState}
          wrapperClassName="rich-editor demo-wrapper"
          editorClassName="demo-editor"
          onEditorStateChange={this.onEditorStateChange}
          placeholder="메시지를 입력하세요..."
        />
      </div>
    );
  }
}

export default MyEditor;

결론

react-draft-wysiwyg와 Next.js를 함께 사용할 때 “window가 정의되지 않음” 오류는 동적 임포트를 사용하고 로더 구성이 올바르게 설정되도록 하는 것으로 해결할 수 있습니다. “ssr: false”로 에디터 컴포넌트를 동적으로 임포트함으로써 Next.js 프로젝트에서 리치 텍스트 편집기를 문제없이 사용할 수 있으며, 서버 사이드 렌더링 중에 발생하는 window 관련 문제를 피할 수 있습니다.

이러한 해결책을 구현하면 Next.js SSR 환경에서 react-draft-wysiwyg를 통합할 때의 어려움을 극복하고, 흥미로운 상호작용 가능한 리치 텍스트 편집기를 만들 수 있습니다.

참고 자료 : 

reactjs