VueJS 2.x集成自定义CKEditor 5构建时遇TypeError错误求助

问题场景 #

在VueJS v2.6项目中，通过CKEditor在线构建工具生成自定义CKEditor5构建包，按官方文档步骤集成到Collaboration.vue组件后，打开组件时触发错误：

TypeError: Class constructor IF cannot be invoked without 'new'

组件代码如下：

<script>
import Editor from 'ckeditor5-custom-build/build/ckeditor';
export default {
  name: 'Collaboration',
  components: {
    editor: Editor,
  },
  data() {
    return {
        editor: Editor,
        editorData: '<p>Content of the editor.</p>',
        editorConfig: {
            // 编辑器配置
        }
    };
  }
};
</script>

<template>
 <div>
    <b-card class="mt-2 custom-header-wrapper">
        <h4 slot="header">Editor</h4>
    </b-card>
    <div v-if="editorData" class="preview">
        <editor :editor="editor" v-model="editorData" :config="editorConfig"></editor>
    </div>
 </div>
</template>

错误原因 #

该错误核心是CKEditor5自定义构建包包含未转译的ES6类语法，而Vue2默认的Babel配置仅处理项目自身代码和Vue官方组件，不会转译第三方依赖的ES6特性，导致浏览器无法正确解析类的构造调用逻辑。

解决步骤 #

1. 配置Babel转译CKEditor构建包 #

在项目根目录的babel.config.js（使用.babelrc则修改对应文件）中，将CKEditor自定义构建包加入transpileDependencies列表，让Babel处理其ES6代码：

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  transpileDependencies: ['ckeditor5-custom-build']
};

2. 重启服务并清除缓存 #

修改配置后，关闭当前Vue开发服务器，重新启动。若问题仍存在，可删除node_modules/.cache目录清除缓存后再次重启。

3. 验证组件注册（可选） #

确认组件注册与模板使用的一致性：

• 代码中注册的组件名为editor，模板里使用<editor>标签是合规的；也可将注册名改为Editor，模板中使用<Editor>，两种方式均兼容Vue2。

4. 版本兼容性检查（备选） #

若上述方法无效，检查在线构建时选择的CKEditor5版本：

• 部分较新的CKEditor5版本可能使用了Vue2 Babel配置无法兼容的ES特性，可尝试选择稍旧的稳定版本重新生成构建包。

内容的提问来源于stack exchange，提问作者Arun s