React CKEditor 플러그인 import 관련 문제

작성

1.1K

수정됨

import './App.css';
import React, { Component } from 'react';
// import { CKEditor } from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import CKEditor from "@ckeditor/ckeditor5-react";
import DecoupledEditor from "@ckeditor/ckeditor5-editor-decoupled/src/decouplededitor";
import Essentials from "@ckeditor/ckeditor5-essentials/src/essentials";
import Paragraph from "@ckeditor/ckeditor5-paragraph/src/paragraph";
import Bold from "@ckeditor/ckeditor5-basic-styles/src/bold";
import Italic from "@ckeditor/ckeditor5-basic-styles/src/italic";
import Underline from "@ckeditor/ckeditor5-basic-styles/src/underline";
import Strikethrough from "@ckeditor/ckeditor5-basic-styles/src/strikethrough";
import BlockQuote from "@ckeditor/ckeditor5-block-quote/src/blockquote";
import Link from "@ckeditor/ckeditor5-link/src/link";
import PasteFromOffice from "@ckeditor/ckeditor5-paste-from-office/src/pastefromoffice";
import Heading from "@ckeditor/ckeditor5-heading/src/heading";
import Font from "@ckeditor/ckeditor5-font/src/font";
import Image from "@ckeditor/ckeditor5-image/src/image";
import ImageStyle from "@ckeditor/ckeditor5-image/src/imagestyle";
import ImageToolbar from "@ckeditor/ckeditor5-image/src/imagetoolbar";
import ImageUpload from "@ckeditor/ckeditor5-image/src/imageupload";
import ImageResize from "@ckeditor/ckeditor5-image/src/imageresize";
import List from "@ckeditor/ckeditor5-list/src/list";
import Alignment from "@ckeditor/ckeditor5-alignment/src/alignment";
import Table from "@ckeditor/ckeditor5-table/src/table";
import TableToolbar from "@ckeditor/ckeditor5-table/src/tabletoolbar";
import TextTransformation from "@ckeditor/ckeditor5-typing/src/texttransformation";
import Indent from "@ckeditor/ckeditor5-indent/src/indent";
import IndentBlock from "@ckeditor/ckeditor5-indent/src/indentblock";
import TableProperties from "@ckeditor/ckeditor5-table/src/tableproperties";
import TableCellProperties from "@ckeditor/ckeditor5-table/src/tablecellproperties";
import SimpleUploadAdapter from "@ckeditor/ckeditor5-upload/src/adapters/simpleuploadadapter";
import 'https://cdn.ckeditor.com/ckeditor5/37.0.0/classic/translations/ko.js';

class App extends Component {
    render() {
        return (
          <div className="App">
            <h2 className='text'>React ckeditor 테스트</h2>
            <div className='centered' id='editor'>
              <CKEditor
                editor={ClassicEditor}
                config={{
                  language: 'ko',
                }}
                data="
                  <h2>RoundTable</h2>
                  <p>ckeditor</p>

                  <p>해당 코드는 개발 코드입니다.<br>
                  ckeditor 사용법 숙지를 위해 사용합니다.</p>
                "
                onReady={editor => {
                  // You can store the "editor" and use when it is needed.
                  console.log('Editor is ready to use!', editor);
                  
                }}
                // onChange={(event, editor) => {
                //   const data = editor.getData();
                //   console.log({ event, editor, data });
                // }}
                // onBlur={(event, editor) => {
                //   console.log('Blur.', editor);
                // }}
                // onFocus={(event, editor) => {
                //   console.log('Focus.', editor);
                // }}
              />
            </div>
          </div>
        );
    }
}

export default App;

test import를 여러 개 해봤는데 계속

ERROR
ckeditor-duplicated-modules
Read more: https://ckeditor.com/docs/ckeditor5/latest/support/error-codes.html#error-ckeditor-duplicated-modules
CKEditorError: ckeditor-duplicated-modules
Read more: https://ckeditor.com/docs/ckeditor5/latest/support/error-codes.html#error-ckeditor-duplicated-modules
    at ./node_modules/ckeditor5/node_modules/@ckeditor/ckeditor5-utils/src/version.js (http://localhost:3000/static/js/bundle.js:526610:9)
    at options.factory (http://localhost:3000/static/js/bundle.js:577866:31)
    at __webpack_require__ (http://localhost:3000/static/js/bundle.js:577220:33)
    at fn (http://localhost:3000/static/js/bundle.js:577523:21)
    at ./node_modules/ckeditor5/node_modules/@ckeditor/ckeditor5-utils/src/emittermixin.js (http://localhost:3000/static/js/bundle.js:523386:66)
    at options.factory (http://localhost:3000/static/js/bundle.js:577866:31)
    at __webpack_require__ (http://localhost:3000/static/js/bundle.js:577220:33)
    at fn (http://localhost:3000/static/js/bundle.js:577523:21)
    at ./node_modules/ckeditor5/node_modules/@ckeditor/ckeditor5-utils/src/index.js (http://localhost:3000/static/js/bundle.js:524514:71)
    at options.factory (http://localhost:3000/static/js/bundle.js:577866:31)

이런 에러가 뜨는데 혹시 해결 방법 있을까요?

답변 3

치즈샌드

질문자

const CKEditorWebpackPlugin = require("@ckeditor/ckeditor5-dev-webpack-plugin");
const { styles } = require("@ckeditor/ckeditor5-dev-utils");

module.exports = {
  webpack: {
    configure: (config, { env, paths }) => {
      config.plugins.push(new CKEditorWebpackPlugin({ language: "ko", addMainLanguageTranslationsToAllAssets: true}));

      const regExpThemeIconSvg = /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/;
      const regExpThemeCss = /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css/;
      const cssRegex = /\.css$/;
      const cssModuleRegex = /\.module\.css$/;
      config.module.rules.push(
        { test: regExpThemeIconSvg, use: ["raw-loader"] },
        {
          test: regExpThemeCss,
          use: [
            {
              loader: "style-loader",
              //   options: { injectType: "singletonStyleTag" }
            },
            {
              loader: "postcss-loader",
              options: styles.getPostCssConfig({
                themeImporter: {
                  themePath: require.resolve("@ckeditor/ckeditor5-theme-lark"),
                },
                minify: true,
              }),
            },
          ],
        }
      );

      config.module.rules.forEach((rule) => {
        if (rule.oneOf) {
          rule.oneOf.forEach((subRule) => {
            if (String(subRule.test) === String(cssRegex)) {
              subRule.exclude = [
                cssModuleRegex,
                regExpThemeCss
              ];
            }

            if (String(subRule.test) === String(cssModuleRegex)) {
              subRule.exclude = [regExpThemeCss];
            }

            if (
              String(subRule.loader).includes("file-loader") &&
              Array.isArray(subRule.exclude)
            ) {
              subRule.exclude.push(regExpThemeIconSvg, regExpThemeCss);
            }
          });
        }
      });

      return config;
    },
  },
};

아 그리고 이건 craco 파일 입니다

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다.

오류 메시지에 따르면, CKEditor를 import할 때 중복된 모듈이 생겨 발생하는 문제인 것 같습니다. 이는 여러 버전의 CKEditor가 서로 충돌을 일으키는 경우 발생할 수 있습니다. 해결 방법으로는 다음과 같은 접근 방법을 시도해 볼 수 있습니다:

node_modules를 완전히 삭제하고 npm install 또는 yarn을 다시 실행하여 모듈을 재설치합니다.
사용하지 않는 CKEditor 관련 import 문을 제거합니다. 예를 들어, ClassicEditor를 사용하는 경우 다른 에디터 타입의 import는 제거합니다.
package.json을 검토하여 중복되거나 충돌할 수 있는 CKEditor 관련 의존성이 있는지 확인하고, 필요한 경우 버전을 조정합니다.

또한, CKEditor의 공식 문서에서 “ckeditor-duplicated-modules” 에러에 대해 추가 정보를 제공하고 있으니 해당 링크에서 좀 더 상세한 해결책을 찾으실 수 있을 것입니다.

모듈 충돌 문제는 복잡할 수 있으니, 하나씩 절차를 따라가면서 문제의 원인을 찾는 것이 중요합니다. 위 단계들을 차례대로 시도해 보시고, 여전히 문제가 해결되지 않는 경우 CKEditor 커뮤니티나 스택 오버플로우에서 유사한 사례를 찾아보는 것도 좋은 방법입니다.

치즈샌드

질문자

아 그리고 CKEditor 코드 블록 플러그인 보니깐 코드 블록 안에 코드가 언어에 따라 하이라이팅이 안돼는거 같은데 혹시 하이라이팅 하는 방법도 있을까요?

인프런 커뮤니티 질문&답변

React CKEditor 플러그인 import 관련 문제