Skip to content
This repository was archived by the owner on Apr 6, 2020. It is now read-only.
This repository was archived by the owner on Apr 6, 2020. It is now read-only.

Having trouble doing an async module loading #39

Open
@antoinebidault

Description

@antoinebidault

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions