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

Question

Hi guys so currently im encountering a problem. Im trying customize a build, so everything works fine in the ckeditor ( which i cloned ) the sample.html works fine too. But when im trying to implement the customize build in Vue 2 i got the error like the title ( the original works okay btw, like the classic build ).

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>)

I dont know why the referenced error is from the library, not the package that i have installed. Here is my 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"

And here is the code in.vue file, one thing

<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>

Thank you for reading, will be appreciated for any help

Answer 1

So this popup becauseof the conflict version of ESLint in my package.json and in ckeditor5 ( which i forked ) is different.

Anyway, if you want to build a custom like me

1. Fork all the repo.
2. Create your custom build but dont push it into the repo which you forked.
3. Instead create a new reposity, push your custom build into there.
4. Install it via

npm i <your-github-name>/<your-repo-name>#<your-branch>