nhn / toast-ui.vue-editor

This repository is DEPRECATED! GO TO 👉 https://github.com/nhn/tui.editor/tree/master/apps/vue-editor
MIT License
229 stars 47 forks source link

Having trouble doing an async module loading #39

Open antoinebidault opened 5 years ago

antoinebidault commented 5 years ago

Version

1.1.1

Test Environment

Windows 10 64 bits / Chrome

Current Behavior

I'm trying to integrate your component in a vuejs app.

I'm having an ultra simple .vue component that uses the Toastui's editor as following FileName : myEditor.vue

<template>
  <editor v-model="content"></editor>
</template>
<script>
import config from 'config'
import 'tui-editor/dist/tui-editor.css'
import 'tui-editor/dist/tui-editor-contents.css'
import { Editor } from '@toast-ui/vue-editor' 

export default {
  name: 'MyEditor',
  components: {
    'editor': Editor
  },
  data() {
    return {
      content:''
    }
  }
}
</script>

This component is imported asyncly as following in a parent component : FileName : index.vue

export default {
  name: 'MyParentCustomComponent',
  components: {
    'document-editor':  () => import('./myEditor')
  }
}

Then, I have the following error in the console

vue.esm.js:629 [Vue warn]: Failed to resolve async component: function documentEditor() {
      return __webpack_require__.e(/*! import() */ 15).then(__webpack_require__.bind(null, /*! ./MyEditor*/ "./src/components/attachment/MyEditor.vue"));
    }
Reason: TypeError: Cannot assign to read only property 'forEach' of object '#<Object>'

If I remove the async loading, it works like a charm ! But you loose the benefit of chunking...