How to add Font plugin into React project

[GW00234847]

I just do the same as the tutorial, but I can not add Font plugin into the toolbar, every time it just popup with error message like this: ckeditor-duplicated-modules, I have followed the tips, but still can not fix this issue.

Whether I import from ckeditor5-font or ckeditor5-font/src/font, it still has this error report.

  import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
  import '@ckeditor/ckeditor5-build-classic/build/translations/zh-cn';
  // import { Font } from '@ckeditor/ckeditor5-font';
  // import Font from '@ckeditor/ckeditor5-font/src/font';
  import { CKEditor } from '@ckeditor/ckeditor5-react';
  const CKEditorComponent = () => {
    return (
      <CKEditor
        config={{
          language: 'zh-cn',
          plugins: [Font],
          toolbar: {
            items: [
              '|', 'heading',
              'undo', 'redo',
              '|', 'fontfamily', 'fontsize', 'fontColor', 'fontBackgroundColor',
              '|', 'bold', 'italic', 'strikethrough', 'subscript', 'superscript', 'code',
              '|', 'alignment',
              'link', 'uploadImage', 'blockQuote', 'codeBlock', 'mediaEmbed',
              '|', 'insertTable', 'tableColumn', 'tableRow', 'mergeTableCells',
              '|', 'bulletedList', 'numberedList', 'todoList', 'outdent', 'indent'
            ],
            // shouldNotGroupWhenFull: true
          }
        }}
        editor={ ClassicEditor }
  
        data="<p>Hello from CKEditor&nbsp;599999!</p>"
        onReady={ editor => {
          window.editor = editor;
          // You can store the "editor" and use when it is needed.
          console.log( 'Editor is ready to use!', editor );
          console.log(
            "toolbar: ",
            Array.from(editor.ui.componentFactory.names()),
            ClassicEditor.builtinPlugins.map(plugin => plugin.pluginName)
          );
        }}
        onChange={ ( event ) => {
          console.log( event );
        }}
        onBlur={ ( event, editor ) => {
          console.log( 'Blur.', editor );
        }}
        onFocus={ ( event, editor ) => {
          console.log( 'Focus.', editor );
        }}
      />
    )
  }

  export default CKEditorComponent;

package.json

{
  "name": "vite-react-ts",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "build:tsc": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "@ant-design/icons": "^5.2.6",
    "@ckeditor/ckeditor5-alignment": "^41.1.0",
    "@ckeditor/ckeditor5-autoformat": "^41.1.0",
    "@ckeditor/ckeditor5-autosave": "^41.1.0",
    "@ckeditor/ckeditor5-basic-styles": "^41.1.0",
    "@ckeditor/ckeditor5-build-balloon": "^41.1.0",
    "@ckeditor/ckeditor5-build-classic": "^41.1.0",
    "@ckeditor/ckeditor5-core": "^41.1.0",
    "@ckeditor/ckeditor5-essentials": "^41.1.0",
    "@ckeditor/ckeditor5-find-and-replace": "^41.1.0",
    "@ckeditor/ckeditor5-font": "^41.1.0",
    "@ckeditor/ckeditor5-highlight": "^41.1.0",
    "@ckeditor/ckeditor5-horizontal-line": "^41.1.0",
    "@ckeditor/ckeditor5-paragraph": "^41.1.0",
    "@ckeditor/ckeditor5-react": "^6.2.0",
    "@ckeditor/ckeditor5-remove-format": "^41.1.0",
    "@ckeditor/ckeditor5-source-editing": "^41.1.0",
    "@ckeditor/ckeditor5-special-characters": "^41.1.0",
    "@faker-js/faker": "^8.3.1",
    "@gwm-digitization-react-basic/components": "1.1.13",
    "@hocuspocus/provider": "^2.8.1",
    "@types/lodash": "^4.14.197",
    "antd": "^5.10.2",
    "antd-style": "^3.4.4",
    "dompurify": "^3.0.9",
    "i18next": "23.4.4",
    "is-hotkey": "^0.2.0",
    "lodash": "^4.17.21",
    "path": "^0.12.7",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-i18next": "13.1.2",
    "react-router-dom": "^6.15.0",
    "recoil": "^0.7.7",
    "recoil-persist": "^5.1.0",
    "runes2": "^1.1.3",
    "uuid": "^9.0.1",
    "ws": "^8.16.0",
    "yjs": "^13.6.10"
  },
  "devDependencies": {
    "@types/dompurify": "^3.0.5",
    "@types/is-hotkey": "^0.1.9",
    "@types/node": "^20.5.7",
    "@types/randomcolor": "^0.5.9",
    "@types/react": "^18.2.15",
    "@types/react-dom": "^18.2.7",
    "@types/uuid": "^9.0.7",
    "@types/ws": "^8.5.10",
    "@typescript-eslint/eslint-plugin": "^6.0.0",
    "@typescript-eslint/parser": "^6.0.0",
    "@vitejs/plugin-react": "^4.0.3",
    "eslint": "^8.45.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.3",
    "less": "^4.2.0",
    "randomcolor": "^0.6.2",
    "typescript": "^5.0.2",
    "vite": "^4.4.5"
  }
}

I also have checked with npm ls, and no related package of CKEditor needs an update.

[Witoso]

Hi, you're adding a plugin to a predefined build, and it's not possible. You need to create a customized build. This is being resolved in ckeditor/ckeditor5#15502.

[GW00234847]

Hi, you're adding a plugin to a predefined build, and it's not possible. You need to create a customized build. This is being resolved in ckeditor/ckeditor5#15502.

Yes, the online builder version, it works now, Thank you very much.