react-quill 이란?

• react-quill은 html editor를 활용할 수 있는 라이브러리다.
• 비교적 가벼우며 러닝커브가 낮아 많이 사용하는 라이브러리!
• 설치 방법 및 활용법은 사실 구글링해도 많이 나와있다 .. 그러나 기록되지 않았던 에러에 대해 다뤄보려고 한다. 특히 next.js 14 버전에서 충분히 일어날 수 있는 오류이기에 -

React-quill 사용법

1. react-quill 설치

npm install react-quil
yarn add react-quill

2. import

import ReactQuill from "react-quill"
export default function Editor() {
  return (
    <>
      <ReactQuill />
    </>
  );
}

3. 스타일 적용

<link
    rel="stylesheet"
    href="https://unpkg.com/react-quill@1.3.3/dist/quill.snow.css"
  />

index.html에 추가
or

import 'react-quill/dist/quill.snow.css'; 

상단에 선언

4. 커스텀 없는 editor 적용 끝

이렇게나 간단하다고?

• 여기까지 잘 따라왔으면 이렇게나 간단하게 끝날 라이브러리가 왜 나만 제대로 안 뜨지? 싶을 수 있다. 이제 발생하는 문제를 알아보자 ..

🦛 ReferenceError: document is not defined

• 가장 대표적인 문제로 Next.js에서 react-quill을 사용하고자 한다면 모두 뜨는 문제이다.
• quill editor은 document 객체를 조작해 동작하기 때문에 server side rendering인 next.js에서는 document 객체가 로드 된 후 에디터를 사용할 수 있게 해줘야 한다.
• 기존 import 했던 ReactQuill을 주석처리 하고, dynamic을 선언해서 ssr을 false 하도록 한다.
  이렇게나 간단한데 사실 전체 코드를 공개하는 곳이 없거나.. 아니면 꽤나 복잡하게 구현해놓아서 가장 쉬운 방법으로 공유한다.

"use client";
import React, {
  ReactChild,
  ReactFragment,
  RefObject,
  useMemo,
  useState,
} from 'react';
// import ReactQuill, { Quill } from 'react-quill';
import 'react-quill/dist/quill.snow.css';

import dynamic from "next/dynamic";
const ReactQuill = dynamic(() => import("react-quill"), { ssr: false });

const formats = [
  'font',
  'header',
  'bold',
  'italic',
  'underline',
  'strike',
  'blockquote',
  'list',
  'bullet',
  'indent',
  'link',
  'align',
  'color',
  'background',
  'size',
  'h1',
];

export default function NoticeEditor  () {
  
 const modules = useMemo(() => {
    return {
      toolbar: {
        container: [
          [{ size: ['small', false, 'large', 'huge'] }],
          [{ align: [] }],
          ['bold', 'italic', 'underline', 'strike'],
          [{ list: 'ordered' }, { list: 'bullet' }],
          [
            {
              color: [],
            },
            { background: [] },
          ],
        ],
      },
    };
  }, []);

	return(
     <ReactQuill
      theme="snow"
      modules={modules}
      formats={formats}
    />
    )
}

🦛 Cannot find module 'tailwindcss'

• 스타일 import 중 왜.. 어째서.. tailwind가 뭐 어쨌다고.. tailwind 오류가 난다.
  나의 경우 tailwind를 사용하지 않는 프로젝트였고, 이것만을 위해 tailwind를 설치할 순 없었다..
  (물론 설치하면 해당 오류는 사라졌다.)

• 그럼 react-qill과 tailwind가 의존성이 있어? 없다.. 그럼 대체 뭐가 문제일까 알아보던 도중
  postcss.config.js 파일에서 아래와 같은 부분이 있다.

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

이 부분에서 tailwindcss 부분 때문에 문제가 됐던 것.. 이 부분을 주석처리하고 다시 실행시키면 해당 오류가 사라진다.

reference

https://github.com/zenoamaro/react-quill/issues/910
https://velog.io/@byungjin0120/React-Quill#next%EC%97%90%EC%84%9C-%EC%A0%9C%EA%B3%B5%ED%95%B4%EC%A3%BC%EB%8A%94-dynamic-import