Проблема с импортом кастомной библиотеки CKEditor

@Smork · Регистрация: 14.06.2023

Студворк — интернет-сервис помощи студентам

Здравствуйте.
У меня есть проблема с импортом кастомной библиотеки для редактирования и создания статей, новостей CKEditor.

По их инструкции я выбрал нужные мне плагины, скачал и залил папку CKEditor в мою папку с проектом.

При работе на localhost всё работает идеально:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
import "../../ckeditor/build/ckeditor";
import { CKEditor } from "@ckeditor/ckeditor5-react";
 
            <CKEditor
              editor={ClassicEditor}
              data={description}
              onChange={(event, editor) => {
                const data = editor.getData();
                setDescription(data);
              }}
            />

Когда я делаю сборку проекта для деплоя на хостинг (npm run build), я публикую на хостинг, и при переходе на страницу где присутствует CKEditor, у меня страница не грузит и ошибка в консоли:

Code
1
ReferenceError: ClassicEditor is not defined

Помогите пожалуйста, что я делаю не так? Как мне правильно импортировать эту библиотеку?

@vxg · 10.06.2024, 10:35

Smork, может она у вас в devDependencies, а надо в dependencies?

@Smork · 10.06.2024, 10:47 **[ТС]**

Вот мой package.json, можете проверить пожалуйста, есть ли тут проблемы?

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
"dependencies": {
    "@ckeditor/ckeditor5-build-classic": "^41.2.1",
    "@ckeditor/ckeditor5-editor-classic": "github:ckeditor/ckeditor5-editor-classic",
    "@ckeditor/ckeditor5-image": "^41.4.2",
    "@ckeditor/ckeditor5-react": "^6.2.0",
    "@ckeditor/ckeditor5-upload": "^41.3.1",
    "@emailjs/browser": "^4.3.3",
    "@headlessui/react": "^1.7.18",
    "@pbe/react-yandex-maps": "^1.2.5",
    "@reduxjs/toolkit": "^2.2.1",
    "@tanstack/react-router": "^1.13.0",
    "axios": "^1.6.7",
    "bcrypt": "^5.1.1",
    "ckeditor5-custom-build": "file:ckeditor",
    "easymde": "^2.18.0",
    "emailjs": "^4.0.3",
    "emailjs-com": "^3.2.0",
    "flowbite": "^2.2.1",
    "framer-motion": "^11.0.24",
    "gsap": "^3.12.5",
    "localforage": "^1.10.0",
    "match-sorter": "^6.3.3",
    "primereact": "^10.6.2",
    "pure-react-carousel": "^1.30.1",
    "rc-pagination": "^4.0.4",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-headroom": "^3.2.1",
    "react-hook-form": "^7.51.0",
    "react-icons": "^5.2.1",
    "react-input-date-mask": "^2.0.0",
    "react-intersection-observer": "^9.10.2",
    "react-lite-youtube-embed": "^2.4.0",
    "react-markdown": "^9.0.1",
    "react-paginate": "^8.2.0",
    "react-redux": "^9.1.0",
    "react-responsive": "^10.0.0",
    "react-router-dom": "^6.21.3",
    "react-scroll": "^1.9.0",
    "react-simplemde-editor": "^5.2.0",
    "react-xml-parser": "^1.1.8",
    "rehype-raw": "^7.0.0",
    "sort-by": "^1.2.0",
    "styled-components": "^6.1.8",
    "tailwindcss-animated": "^1.0.1",
    "webpack": "^5.91.0",
    "webpack-cli": "^5.1.4"
  },
  "devDependencies": {
    "@tailwindcss/aspect-ratio": "^0.4.2",
    "@tanstack/router-vite-plugin": "^1.12.16",
    "@types/react": "^18.2.43",
    "@types/react-dom": "^18.2.17",
    "@vitejs/plugin-react": "^4.2.1",
    "autoprefixer": "^10.4.16",
    "eslint": "^8.55.0",
    "eslint-plugin-react": "^7.33.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.5",
    "postcss": "^8.4.33",
    "react-compress": "^3.6.4",
    "tailwindcss": "^3.4.1",
    "vite": "^5.2.8"
  }

Вот как выглядит моя структура:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
project 
    .vercel
    build
    ckeditor
    node_modules
    src
    .eslintrc
    .gitattributes
    .gitignore
    .htcaccess
    index.html
    package.json
    package-lock.json
    postcss.config
    tailwind.config
    vite.config

@vxg · 10.06.2024, 10:57

Smork, а ClassicEditor у вас импортируется в то место где вы его используете?

Добавлено через 3 минуты
Smork, кажется вот тут, наверное, import "../../ckeditor/build/ckeditor", но вроде это "Import an entire module for side effects only, without importing anything." и не ясно как оно в localhost работает. вроде там должно быть что-то вроде import { ClassicEditor } from '@ckeditor/ckeditor5-editor-classic'

@Smork · 10.06.2024, 11:05 **[ТС]**

При замене
import "../../ckeditor/build/ckeditor"
на
import { ClassicEditor } from '@ckeditor/ckeditor5-editor-classic
у меня ошибка:
[plugin:vite:import-analysis] Failed to resolve entry for package "@ckeditor/ckeditor5-editor-classic". The package may have incorrect main/module/exports specified in its package.json.

Но я так понимаю, я импортирую просто готовую библиотеку CKEditor без моих плагинов. Но мне нужна моя кастомная с моими плагинами.

Может получится эту кастомную библиотеку опубликовать в NPM и импортировать в дальнейшем из NPM?

@vxg · 10.06.2024, 11:27

Smork, а написать import { ClassicEditor } from "../../ckeditor/build/ckeditor" не дает?

@Smork · 10.06.2024, 11:30 **[ТС]**

Теперь вот так:

При этом импорте: import { ClassicEditor } from "../../ckeditor/build/ckeditor"

Uncaught SyntaxError: The requested module '/ckeditor5/build/ckeditor.js' does not provide an export named 'ClassicEditor' (at CabinetCreate.jsx:9:10)

Если я делаю импорт вот так: import "../../ckeditor5/build/ckeditor";

То всё работает, кастомная библиотека тоже работает с плагинами. Но при публикации на хостинг, эта ошибка: ReferenceError: ClassicEditor is not defined

@vxg · 10.06.2024, 11:40

Smork, а если import ClassicEditor from "../../ckeditor/build/ckeditor" ?

Добавлено через 2 минуты
Smork, вообще, у вас странно используется пакет - вы в зависимостях указываете гитхаб вместо npm (учитывая, что вы потом делаете импорт из как-то собранного кода это, наверное, не нужно), а потом, видимо, как то локально его собираете с какими-то дополнениями (для подключения которых, кажется, должен быть штатный способ) и подключаете...

@Smork · 10.06.2024, 11:45 **[ТС]**

Тоже самое
Uncaught SyntaxError: The requested module '/ckeditor5/build/ckeditor.js' does not provide an export named 'default' (at CabinetCreate.jsx:9:8)

Вообще вот у них официальная инструкция, но работая по ней, ничего не получается.
https://ckeditor.com/docs/cked... ne-builder

@mr_dramm · 10.06.2024, 14:40

Smork, попробуйте этот пример demo-react-18 из репозитория ckeditor5-react,
PS
хотя там нет кастомного билда, извиняюсь

@Splaisto · 10.06.2024, 15:43

Сообщение от Smork

editor={ClassicEditor}

что вообще должно быть в ClassicEditor ?

@vxg · 11.06.2024, 08:36

Smork, а нельзя не собирать кастомную библиотеку? просто сделать свой плагин и зарегистрировать его, вроде оно так должно работать, нет? https://ckeditor.com/docs/cked... tom-plugin

Новые блоги и статьи Все статьи Все блоги /
Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .	SDL3 для Web (WebAssembly): Сборка SDL3 и Box2D из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .	SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .
Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»

@vxg Модератор 3409 / 2180 / 354 Регистрация: 13.01.2012 Сообщений: 8,460
	10.06.2024, 10:35
	Smork, может она у вас в devDependencies, а надо в dependencies? 1

@vxg Модератор 3409 / 2180 / 354 Регистрация: 13.01.2012 Сообщений: 8,460
	10.06.2024, 10:57
	Smork, а ClassicEditor у вас импортируется в то место где вы его используете? Добавлено через 3 минуты Smork, кажется вот тут, наверное, import "../../ckeditor/build/ckeditor", но вроде это "Import an entire module for side effects only, without importing anything." и не ясно как оно в localhost работает. вроде там должно быть что-то вроде import { ClassicEditor } from '@ckeditor/ckeditor5-editor-classic' 2

@Smork 0 / 0 / 0 Регистрация: 14.06.2023 Сообщений: 40
	10.06.2024, 11:05 [ТС]
	При замене import "../../ckeditor/build/ckeditor" на import { ClassicEditor } from '@ckeditor/ckeditor5-editor-classic у меня ошибка: [plugin:vite:import-analysis] Failed to resolve entry for package "@ckeditor/ckeditor5-editor-classic". The package may have incorrect main/module/exports specified in its package.json. Но я так понимаю, я импортирую просто готовую библиотеку CKEditor без моих плагинов. Но мне нужна моя кастомная с моими плагинами. Может получится эту кастомную библиотеку опубликовать в NPM и импортировать в дальнейшем из NPM? 0

@vxg Модератор 3409 / 2180 / 354 Регистрация: 13.01.2012 Сообщений: 8,460
	10.06.2024, 11:27
	Smork, а написать import { ClassicEditor } from "../../ckeditor/build/ckeditor" не дает? 1

@Smork 0 / 0 / 0 Регистрация: 14.06.2023 Сообщений: 40
	10.06.2024, 11:30 [ТС]
	Теперь вот так: При этом импорте: import { ClassicEditor } from "../../ckeditor/build/ckeditor" Uncaught SyntaxError: The requested module '/ckeditor5/build/ckeditor.js' does not provide an export named 'ClassicEditor' (at CabinetCreate.jsx:9:10) Если я делаю импорт вот так: import "../../ckeditor5/build/ckeditor"; То всё работает, кастомная библиотека тоже работает с плагинами. Но при публикации на хостинг, эта ошибка: ReferenceError: ClassicEditor is not defined 0

@vxg Модератор 3409 / 2180 / 354 Регистрация: 13.01.2012 Сообщений: 8,460
	10.06.2024, 11:40
	Smork, а если import ClassicEditor from "../../ckeditor/build/ckeditor" ? Добавлено через 2 минуты Smork, вообще, у вас странно используется пакет - вы в зависимостях указываете гитхаб вместо npm (учитывая, что вы потом делаете импорт из как-то собранного кода это, наверное, не нужно), а потом, видимо, как то локально его собираете с какими-то дополнениями (для подключения которых, кажется, должен быть штатный способ) и подключаете... 0

@Smork 0 / 0 / 0 Регистрация: 14.06.2023 Сообщений: 40
	10.06.2024, 11:45 [ТС]
	Тоже самое Uncaught SyntaxError: The requested module '/ckeditor5/build/ckeditor.js' does not provide an export named 'default' (at CabinetCreate.jsx:9:8) Вообще вот у них официальная инструкция, но работая по ней, ничего не получается. https://ckeditor.com/docs/cked... ne-builder 0

@mr_dramm Молодой техлид) 1818 / 1056 / 329 Регистрация: 17.07.2021 Сообщений: 2,147 Записей в блоге: 14
	10.06.2024, 14:40
	Smork, попробуйте этот пример demo-react-18 из репозитория ckeditor5-react, PS хотя там нет кастомного билда, извиняюсь 1

@vxg Модератор 3409 / 2180 / 354 Регистрация: 13.01.2012 Сообщений: 8,460
	11.06.2024, 08:36
	Smork, а нельзя не собирать кастомную библиотеку? просто сделать свой плагин и зарегистрировать его, вроде оно так должно работать, нет? https://ckeditor.com/docs/cked... tom-plugin 0