[ NextJS ] next.js에서 react-draft-wysiwyg 사용하기 ( Feat. 문제점 )

npm

$ npm install react-draft-wysiwyg draft-js
$ npm install @types/react-draft-wysiwyg

 

editor.tsx

import React, { useState } from 'react';
// import { Editor as Editors } from 'react-draft-wysiwyg';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
import { EditorState } from 'draft-js';
import styled from 'styled-components';
import dynamic from 'next/dynamic';

const EditorBlock = styled.div`
    .editor_wrap {
        width: 100%;
        margin-bottom: 4rem;
        border: 1px solid #DDD !important;
        border-radius: 8px !important;
    }
    .editor {
        height: 450px !important;
        padding: .5rem !important;
    }
`;

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

const Editor = () => {


    // useState로 상태관리
    const [editorState, setEditorState] = useState(EditorState.createEmpty());

    const onEditorStateChange = (editorState: EditorState) => {
        // editorState에 값 설정
        setEditorState(editorState);
    };

    // toolbar
    const toolbar = {
        options: ['inline', 'blockType', 'fontSize', 'fontFamily'],
        inline: {
            options: ['bold', 'italic', 'underline', 'strikethrough'],
        },
        blockType: {
            inDropdown: true,
            options: ['Normal', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'Blockquote'],
            className: 'demo-option-custom-wide',
            dropdownClassName: 'demo-dropdown-custom'
        },
        fontSize: {
            options: [8, 9, 10, 11, 12, 14, 16, 18, 24, 30, 36, 48, 60, 72, 96],
            className: "toolbar-class",
            dropdownClassName: 'demo-dropdown-custom',
        },
        fontFamily: {
            options: ['Arial', 'Georgia', 'Impact', 'Tahoma', 'Times New Roman', 'Verdana'],
            className: "toolbar-class",
            dropdownClassName: 'demo-dropdown-custom',
        }
    }

    return (
        <EditorBlock>
            <Editors
                // 에디터와 툴바에 적용
                wrapperClassName="editor_wrap"
                // 에디터 주변에 적용
                editorClassName="editor"
                toolbarClassName="toolbar-class"
                localization={{ locale: "ko" }}
                toolbar={toolbar}
                editorState={editorState}
                onEditorStateChange={onEditorStateChange}
            />
        </EditorBlock>
    );
}

export default Editor;

 

index.tsx

import dynamic from 'next/dynamic';

const Editor = dynamic(() => import("@/components/editor/editor"), {ssr: false});

const Page = () => {
    return (
        <Editor />
    );
}

export default Page;

NextJS에서 Draft.js를 사용하는 거 자체는 어려움이 없었습니다. 

 

문제점

Warning: Can't call setState on a component that is not yet mounted. This is a no-op, but it might indicate a bug in your application. Instead, assign to `this.state` directly or define a `state = {};` class property with the desired state in the r component.

페이지에 어떤 부위든 클릭을 하면 위와같은 경고문구가 나왔습니다.

처음에는 무조건 ssr때문이라 생각해서 dynamic을 적용시켰지만 전혀 해결될 기미가 보이지 않았습니다.

 

여기저기 둘러보다.... 유일한 문제 해결 방법이 엄격모드 해제라는 내용을 발견하게 되었습니다 ㅠ

엄격모드를 해제해서 고친다는 것은 사실 말이 안 되기 때문에 이 문제를 해결할 방법은 현재 존재하지 않는 듯싶습니다..

2020년부터 많은 사람들이 이 문제 때문에 글을 올렸던 것 같은데 모두 해결했다는 내용은 없었습니다.

결국 SSR 관련 문제이기 때문에 React에서는 문제없이 돌아갈 거라 생각됩니다.

 

결론.. 포기하고 다른 에디터를 찾아봐야겠습니다..!!

 

Warning관련 github 바로가기