I'm doing the ckeditor5 build.
ckeditor5 plugin duplicate error occurred I was revising it by referring to the address belowten thousand You are getting stuck in a new error. https://github.com/Technologie-Visao/ckeditor5-video/issues/12
Things I've tried.
I matched the version (33.0.0) of the @ckeditor packages recorded in the main package.json and ckeditor5-video.
The issue related to ckeditor5-video/src/video/utils.js in the above error picture appears because there are no utils in @ckeditor, so additionally, Successfully installed npm install --save @ckeditor/ckeditor5-utils.
Any Solution ?
package.json ( root )
"main": "./build/ckeditor.js",
"devDependencies": {
"@ckeditor/ckeditor5-autoformat": "^33.0.0",
"@ckeditor/ckeditor5-basic-styles": "^33.0.0",
"@ckeditor/ckeditor5-block-quote": "^33.0.0",
"@ckeditor/ckeditor5-code-block": "^33.0.0",
"@ckeditor/ckeditor5-dev-utils": "^25.4.5",
"@ckeditor/ckeditor5-dev-webpack-plugin": "^25.4.5",
"@ckeditor/ckeditor5-editor-classic": "^33.0.0",
"@ckeditor/ckeditor5-essentials": "^33.0.0",
"@ckeditor/ckeditor5-font": "^33.0.0",
"@ckeditor/ckeditor5-heading": "^33.0.0",
"@ckeditor/ckeditor5-highlight": "^33.0.0",
"@ckeditor/ckeditor5-image": "^33.0.0",
"@ckeditor/ckeditor5-indent": "^33.0.0",
"@ckeditor/ckeditor5-link": "^33.0.0",
"@ckeditor/ckeditor5-list": "^33.0.0",
"@ckeditor/ckeditor5-media-embed": "^33.0.0",
"@ckeditor/ckeditor5-paragraph": "^33.0.0",
"@ckeditor/ckeditor5-paste-from-office": "^33.0.0",
"@ckeditor/ckeditor5-table": "^33.0.0",
"@ckeditor/ckeditor5-theme-lark": "^33.0.0",
"@ckeditor/ckeditor5-typing": "^33.0.0",
"@visao/ckeditor5-video": "^28.0.1",
"css-loader": "^5.2.7",
"postcss": "^7.0.39",
"postcss-loader": "^4.3.0",
"raw-loader": "^4.0.2",
"style-loader": "^2.0.0",
"terser-webpack-plugin": "^4.2.3",
"webpack": "^5.70.0",
"webpack-cli": "^4.9.2"
},
"scripts": {
"build": "webpack --mode development"
},
"dependencies": {
"@ckeditor/ckeditor5-upload": "^33.0.0",
"@ckeditor/ckeditor5-utils": "^35.0.1"
}
node_modules/@visao/ckeditor5-video/package.json
"dependencies": {
"@ckeditor/ckeditor5-ui": "^33.0.0",
"ckeditor5": "^33.0.0"
},
"description": "Video features for CKEditor 5 (like Image features).",
"devDependencies": {
"@ckeditor/ckeditor5-adapter-ckfinder": "^33.0.0",
"@ckeditor/ckeditor5-basic-styles": "^33.0.0",
"@ckeditor/ckeditor5-ckfinder": "^33.0.0",
"@ckeditor/ckeditor5-clipboard": "^33.0.0",
"@ckeditor/ckeditor5-core": "^33.0.0",
"@ckeditor/ckeditor5-dev-utils": "^25.0.0",
"@ckeditor/ckeditor5-editor-classic": "^33.0.0",
"@ckeditor/ckeditor5-engine": "^33.0.0",
"@ckeditor/ckeditor5-enter": "^33.0.0",
"@ckeditor/ckeditor5-essentials": "^33.0.0",
"@ckeditor/ckeditor5-heading": "^33.0.0",
"@ckeditor/ckeditor5-html-embed": "^33.0.0",
"@ckeditor/ckeditor5-indent": "^33.0.0",
"@ckeditor/ckeditor5-inspector": "^2.2.2",
"@ckeditor/ckeditor5-link": "^33.0.0",
"@ckeditor/ckeditor5-list": "^33.0.0",
"@ckeditor/ckeditor5-paragraph": "^33.0.0",
"@ckeditor/ckeditor5-table": "^33.0.0",
"@ckeditor/ckeditor5-theme-lark": "^33.0.0",
"@ckeditor/ckeditor5-typing": "^33.0.0",
"@ckeditor/ckeditor5-undo": "^33.0.0",
"@ckeditor/ckeditor5-upload": "^33.0.0",
"@ckeditor/ckeditor5-utils": "^33.0.0",
"@ckeditor/ckeditor5-widget": "^33.0.0",
"postcss-loader": "^3.0.0",
"raw-loader": "^4.0.2",
"style-loader": "^1.3.0",
"webpack": "^4.44.2",
"webpack-cli": "^3.3.12"
},
"engines": {
"node": ">=12.0.0",
"npm": ">=5.7.1"
},
src/ckeditor.js ( root )
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor.js';
import Autoformat from '@ckeditor/ckeditor5-autoformat/src/autoformat.js';
import BlockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote.js';
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold.js';
import CodeBlock from '@ckeditor/ckeditor5-code-block/src/codeblock.js';
import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials.js';
import FontColor from '@ckeditor/ckeditor5-font/src/fontcolor.js';
import FontFamily from '@ckeditor/ckeditor5-font/src/fontfamily.js';
import FontSize from '@ckeditor/ckeditor5-font/src/fontsize.js';
import Heading from '@ckeditor/ckeditor5-heading/src/heading.js';
import Highlight from '@ckeditor/ckeditor5-highlight/src/highlight.js';
import Image from '@ckeditor/ckeditor5-image/src/image.js';
import ImageCaption from '@ckeditor/ckeditor5-image/src/imagecaption.js';
import ImageInsert from '@ckeditor/ckeditor5-image/src/imageinsert.js';
import ImageResize from '@ckeditor/ckeditor5-image/src/imageresize.js';
import ImageStyle from '@ckeditor/ckeditor5-image/src/imagestyle.js';
import ImageToolbar from '@ckeditor/ckeditor5-image/src/imagetoolbar.js';
import {ImageResizeEditing} from "@ckeditor/ckeditor5-image";
import ImageUpload from '@ckeditor/ckeditor5-image/src/imageupload.js';
import ImageUploadProgress from '@ckeditor/ckeditor5-image/src/imageupload/imageuploadprogress.js';
import Indent from '@ckeditor/ckeditor5-indent/src/indent.js';
// import Indent from '@ckeditor/ckeditor5-out
import IndentBlock from '@ckeditor/ckeditor5-indent/src/indentblock.js';
import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic.js';
import Link from '@ckeditor/ckeditor5-link/src/link.js';
import List from '@ckeditor/ckeditor5-list/src/list.js';
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph.js';
import PasteFromOffice from '@ckeditor/ckeditor5-paste-from-office/src/pastefromoffice.js';
import Table from '@ckeditor/ckeditor5-table/src/table.js';
import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar.js';
import TextTransformation from '@ckeditor/ckeditor5-typing/src/texttransformation.js';
import SimpleUploadAdapter from '@ckeditor/ckeditor5-upload/src/adapters/simpleuploadadapter.js';
import Video from '@visao/ckeditor5-video/src/video.js';
import VideoUpload from '@visao/ckeditor5-video/src/videoupload.js';
import VideoUploadProgress from '@visao/ckeditor5-video/src/videoupload/videouploadprogress.js';
import VideoResize from '@visao/ckeditor5-video/src/videoresize.js';
import VideoStyle from '@visao/ckeditor5-video/src/videostyle.js';
import VideoToolbar from "@visao/ckeditor5-video/src/videotoolbar.js";
import VideoResizeEditing from "@visao/ckeditor5-video/src/videoresize/videoresizeediting.js";
import VideoResizeHandles from "@visao/ckeditor5-video/src/videoresize/videoresizehandles.js";
import MediaEmbed from "@ckeditor/ckeditor5-media-embed/src/mediaembed.js";
import MediaEmbedToolbar from "@ckeditor/ckeditor5-media-embed/src/mediaembedtoolbar.js";
class Editor extends ClassicEditor {}
// Plugins to include in the build.
Editor.builtinPlugins = [
Autoformat,
BlockQuote,
Bold,
CodeBlock,
Essentials,
FontColor,
FontFamily,
FontSize,
Heading,
Highlight,
Image,
ImageCaption,
ImageInsert,
ImageResize,
ImageStyle,
ImageToolbar,
ImageUpload,
ImageUploadProgress,
ImageResizeEditing,
Indent,
IndentBlock,
SimpleUploadAdapter,
Italic,
Link,
List,
Paragraph,
PasteFromOffice,
Table,
TableToolbar,
TextTransformation,
Video,
VideoUpload,
VideoUploadProgress,
VideoResize,
VideoStyle,
VideoToolbar,
VideoResizeEditing,
VideoResizeHandles,
MediaEmbed,
MediaEmbedToolbar,
SimpleUploadAdapter
];
// Editor configuration.
Editor.defaultConfig = {
toolbar: {
items: [
'heading',
'|',
'imageUpload',
"mediaEmbed",
'videoUpload',
'|',
'bold',
'italic',
'|',
'bulletedList',
'numberedList',
'|',
'outdent',
'indent',
'|',
'undo',
'redo',
'blockQuote',
'insertTable'
]
},
language: 'ko',
video: {
resizeOptions: [
{
name: 'videoResize:original',
value: null,
label: 'Original',
icon: 'original'
},
{
name: 'videoResize:50',
value: '50',
label: '50',
icon: 'medium'
},
{
name: 'videoResize:100',
value: '100',
label: '100',
icon: 'large'
}
],
styles: [
'alignLeft', 'alignCenter', 'alignRight'
],
toolbar: [
'videoResize:original',
'videoResize:50',
'videoResize:100',
'videoStyle:alignLeft',
'videoStyle:alignCenter',
'videoStyle:alignRight'
]
},
image: {
resizeOptions: [
{
name: 'resizeImage:original',
value: null,
icon: 'original'
},
{
name: 'resizeImage:50',
value: '50',
icon: 'medium'
},
{
name: 'resizeImage:100',
value: '100',
icon: 'large'
}
],
styles: [
'alignLeft', 'alignCenter', 'alignRight'
],
toolbar: [
'resizeImage:original',
'resizeImage:50',
'resizeImage:100',
'imageStyle:alignCenter',
'imageStyle:alignLeft',
'imageStyle:alignRight'
]
},
table: {
contentToolbar: [
'tableColumn',
'tableRow',
'mergeTableCells'
]
}
};
export default Editor;
As a result of checking, version 25 of the ckeditor5-video package was the last When I set the version of ckeditor5 to version 25 and did npm build again, it worked normally.