Syntax Error: Error: Failed to load config "ckeditor5" to extend from. While importing CKEditor to Vuejs

Syntax Error: Error: Failed to load config "ckeditor5" to extend from. While importing CKEditor to Vuejs

大家好,我现在遇到了一个问题。我正在尝试自定义构建,因此在 ckeditor(我克隆的)中一切正常,sample.html 也正常工作。但是当我尝试在 Vue 2 中实现自定义构建时,出现了如标题所示的错误(顺便说一句,原来的工作正常,就像经典构建一样)。

Syntax Error: Error: Failed to load config "ckeditor5" to extend from.
Referenced from: C:\Users\nam\Desktop\CKEditorLib\ckeditor5\.eslintrc.js
    at _normalizeObjectConfigDataBody.next (<anonymous>)
    at _normalizeObjectConfigData.next (<anonymous>)

我不知道为什么引用的错误来自库,而不是我安装的包。 这是我的 package.json

"@ckeditor/ckeditor5-adapter-ckfinder": "^24.0.0",
    "@ckeditor/ckeditor5-alignment": "^24.0.0",
    "@ckeditor/ckeditor5-autoformat": "^24.0.0",
    "@ckeditor/ckeditor5-basic-styles": "^24.0.0",
    "@ckeditor/ckeditor5-block-quote": "^24.0.0",
    "@ckeditor/ckeditor5-build-custom": "file:../../CKEditorLib/ckeditor5/packages/ckeditor5-build-custom",
    "@ckeditor/ckeditor5-ckfinder": "^24.0.0",
    "@ckeditor/ckeditor5-core": "^24.0.0",
    "@ckeditor/ckeditor5-dev-utils": "^20.0.0",
    "@ckeditor/ckeditor5-dev-webpack-plugin": "^23.6.1",
    "@ckeditor/ckeditor5-easy-image": "^24.0.0",
    "@ckeditor/ckeditor5-editor-classic": "^24.0.0",
    "@ckeditor/ckeditor5-essentials": "^24.0.0",
    "@ckeditor/ckeditor5-heading": "^24.0.0",
    "@ckeditor/ckeditor5-image": "^24.0.0",
    "@ckeditor/ckeditor5-indent": "^24.0.0",
    "@ckeditor/ckeditor5-link": "^24.0.0",
    "@ckeditor/ckeditor5-list": "^24.0.0",
    "@ckeditor/ckeditor5-media-embed": "^24.0.0",
    "@ckeditor/ckeditor5-paragraph": "^24.0.0",
    "@ckeditor/ckeditor5-paste-from-office": "^24.0.0",
    "@ckeditor/ckeditor5-table": "^24.0.0",
    "@ckeditor/ckeditor5-theme-lark": "^24.0.0",
    "@ckeditor/ckeditor5-typing": "^24.0.0",
    "@ckeditor/ckeditor5-vue2": "^1.0.5",
    "core-js": "^3.6.5",
    "postcss-loader": "^3.0.0",
    "raw-loader": "^0.5.1",
    "style-loader": "^1.2.1",
    "terser-webpack-plugin": "^3.0.2",
    "vue": "^2.6.11",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.12"

这是 .vue 文件中的代码,一件事

<template>
  <div class="hello">
    <ckeditor 
      :editor="editor" 
      v-model="editorData" 
      :config="editorConfig">
    </ckeditor>
  </div>
</template>

<script>
import ClassicEditor from '@ckeditor/ckeditor5-build-custom/src/ckeditor'
//Same error happened if i try to import ClassicEditor from /buid/ckeditor

export default {
  name: 'HelloWorld',
  data() {
    return {
        editor: ClassicEditor,
        editorData: '<p>Content of the editor.</p>',
        editorConfig: {
            // The configuration of the editor.
        }
    };
  }
}
</script>

感谢您的阅读,如有任何帮助,我们将不胜感激

所以这个弹出窗口是因为我的 package.json 和 ckeditor5(我分叉的)中的 ESLint 版本不同。

无论如何,如果你想像我一样建立一个自定义

  1. 分叉所有的回购协议。
  2. 创建您的自定义构建,但不要将其推送到您分叉的存储库中。
  3. 而是创建一个新的存储库,将您的自定义构建推送到那里。
  4. 通过
  5. 安装
npm i <your-github-name>/<your-repo-name>#<your-branch>