DocumentEditor leads to TypeError: Object(...) is not a function

[Simone Ferrero]

I am introducing the DocumentEditor component into a Vue 2 project.

In the console I get

I used the sample page taken from the documentation as a starting point.

<template>
<div id="app">
  <ejs-documenteditorcontainer ref='documenteditor' :serviceUrl='serviceUrl' height="590px" id='container' :enableToolbar='true'></ejs-documenteditorcontainer>
</div>
</template>
<script>
  import Vue from 'vue';
  import { DocumentEditorContainerPlugin, DocumentEditorContainerComponent,Toolbar} from '@syncfusion/ej2-vue-documenteditor';

  Vue.use(DocumentEditorContainerPlugin);

  export default {
data() {
  return { serviceUrl:'https://ej2services.syncfusion.com/production/web-services/api/documenteditor/' };
},
provide: {
  //Inject require modules.
  DocumentEditorContainer: [Toolbar]
}
  }
</script>
<style>
 @import "../../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
</style>



When I load the page I get the following error inside the browser console

TypeError:Object(...)isnot a function

DocumentEditorComponent documenteditor.component.js:204
documenteditor.component.js:211
node_modules 26.js:9683
__webpack_require__ app.js:854
fn app.js:151
index.js:1
node_modules 26.js:9695
__webpack_require__ app.js:854
fn app.js:151
index.js:2
node_modules 26.js:9239
__webpack_require__ app.js:854
fn app.js:151
cjs.js:3
./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/views/sf/DocumentEditor.vue?vue&type=script&lang=js&26.js:9707
__webpack_require__ app.js:854
fn app.js:151
DocumentEditor.vue:2
./src/views/sf/DocumentEditor.vue?vue&type=script&lang=js&26.js:9788
__webpack_require__ app.js:854
fn app.js:151
DocumentEditor.vue:3
vue 26.js:9776
__webpack_require__ app.js:854
fn app.js:151
vue-router.esm.js:2257

How can I get the DocumentEditor to load? Regards

[Suriya Murugan]

Hi Simone,

Syncfusion Greetings!

Please check below sample for reference:

https://github.com/SyncfusionExamples/View-and-edit-Word-document-in-Vue/tree/main/Vue2

https://www.syncfusion.com/kb/12913/how-to-view-and-edit-word-documents-in-vue-app-using-syncfusion-word-processor

Note: Warnings will not create any problem on rendering.

Please let us know if you still facing issue.

Regards,

Suriya M.

[Simone Ferrero]

Hi Suriya,

what is the latest DocumentEditor package version for vue2?

I have tried the latest 19.4.48 version and it leads to the error described above.
If I install the same version used in the github demo (19.3.54) it seems to work fine.

It seems to be a regression between the 19.3 and 19.4 version.

Regards,

[Ajithamarlin Edward]

HI  Simone,

Currently, we are checking and will update further details by February 10,2022

Regards,

Aj

[Ajithamarlin Edward]

Hi Simone,

We suspect the reported issue might be style reference in Document editor.

Please refer the styles like below and let us know if you still facing issue.

@import '../node_modules/@syncfusion/ej2-base/styles/material.css';

@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';

@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';

@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';

@import '../node_modules/@syncfusion/ej2-lists/styles/material.css';

@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';

@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';

@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';

@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";

Please share below details if you still facing issue in vue document editor

1. Can you please share your node version?
2. Please share the simple sample to recreate the same issue in our side.

Regards,

Ajithamarlin E