ckeditor5 npm 错误警告未找到导出“文件名”

Question

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.

1. I matched the version (33.0.0) of the @ckeditor packages recorded in the main package.json and ckeditor5-video.

2. 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;

Answer 1

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.