DocumentEditor throws errors when loading certain .docx files

[Tom]

Hi,

for whatever reason I cannot load one of my template files in the DocumentEditor while other docx are loaded perfectly. Interestingly the file gets loaded just fine in your demo (https://ej2.syncfusion.com/vue/demos/#/bootstrap5/document-editor/default.html).

My code looks like this:

<template>

<v-container class="w-100 h-100">

<v-btn v-on:click="saveAsSfdt">Save Docv-btn>

<v-btn v-on:click="loadDocument">Load Docv-btn>

<ejs-documenteditorcontainer ref="documenteditorcontainer" :serviceUrl="serviceUrl" :enableToolbar="true"

height="600px">ejs-documenteditorcontainer>

v-container>

template>

<script>

import axios from 'axios';

import { DocumentEditorContainerComponent, Toolbar } from '@syncfusion/ej2-vue-documenteditor';

export default {

components: {

'ejs-documenteditorcontainer': DocumentEditorContainerComponent,

},

data() {

return {

serviceUrl: 'https://localhost:7190/DocumentEditor/',

}

},

methods: {

saveAsSfdt: function () {

console.log(this.$refs.documenteditorcontainer.ej2Instances.documentEditor);

this.$refs.documenteditorcontainer.ej2Instances.documentEditor.save('output', 'Sfdt');

},

loadDocument() {

axios

.get('https://localhost:7190/Test/GetDocument')

.then(response => {

console.log(response.data);

this.$refs.documenteditorcontainer.ej2Instances.documentEditor.open(response.data);

})

.catch(error => {

console.log(error);

})

.finally(() => {

// do sth.

})

}

},

provide: {

DocumentEditorContainer: [Toolbar],

}

}

script>

Backend code looks like this:

[HttpGet]

[Route("GetDocument")]

public string GetDocument()

{

FileStream fs = new FileStream(@"C:\Users\word\Desktop\Templates\Template.docx", FileMode.Open, FileAccess.Read, FileShare.ReadWrite);

// its important to use Syncfusion.EJ2.DocumentEditor.WordDocument instead of Synfusion.DocIO.DLS

Syncfusion.EJ2.DocumentEditor.WordDocument.MetafileImageParsed += OnMetafileImageParsed;

Syncfusion.EJ2.DocumentEditor.WordDocument wordDocument = Syncfusion.EJ2.DocumentEditor.WordDocument.Load(fs, Syncfusion.EJ2.DocumentEditor.FormatType.Docx);

Syncfusion.EJ2.DocumentEditor.WordDocument.MetafileImageParsed -= OnMetafileImageParsed;

string json = Newtonsoft.Json.JsonConvert.SerializeObject(wordDocument);

wordDocument.Dispose();

fs.Dispose();

return json;

}

When trying to load this certain file I get tons of errors like this:

TypeError: Cannot read properties of undefined (reading 'height')

at Layout2.getLineY (@syncfusion_ej2-vue-documenteditor.js?v=2440f1a1:11818:36)

at Layout2.checkInbetweenShapeOverlap (@syncfusion_ej2-vue-documenteditor.js?v=2440f1a1:11761:26)

at Layout2.layoutEmptyLineWidget (@syncfusion_ej2-vue-documenteditor.js?v=2440f1a1:11044:14)

at Layout2.layoutParagraph (@syncfusion_ej2-vue-documenteditor.js?v=2440f1a1:9695:12)

at Layout2.layoutBlock (@syncfusion_ej2-vue-documenteditor.js?v=2440f1a1:9341:24)

at Layout2.layoutCell (@syncfusion_ej2-vue-documenteditor.js?v=2440f1a1:15765:12)

at Layout2.layoutRow (@syncfusion_ej2-vue-documenteditor.js?v=2440f1a1:15560:12)

at Layout2.layoutTable (@syncfusion_ej2-vue-documenteditor.js?v=2440f1a1:15416:18)

at Layout2.layoutBlock (@syncfusion_ej2-vue-documenteditor.js?v=2440f1a1:9347:24)

at Layout2.layoutShape (@syncfusion_ej2-vue-documenteditor.js?v=2440f1a1:9777:14)

@syncfusion_ej2-vue-documenteditor.js?v=2440f1a1:18823 Uncaught TypeError: Cannot read properties of undefined (reading 'children')

at Renderer2.renderParagraphWidget (@syncfusion_ej2-vue-documenteditor.js?v=2440f1a1:18823:35)

at Renderer2.renderWidget (@syncfusion_ej2-vue-documenteditor.js?v=2440f1a1:18756:12)

at Renderer2.render (@syncfusion_ej2-vue-documenteditor.js?v=2440f1a1:18650:12)

at Renderer2.renderWidgets (@syncfusion_ej2-vue-documenteditor.js?v=2440f1a1:18448:12)

at PageLayoutViewer2.renderPage (@syncfusion_ej2-vue-documenteditor.js?v=2440f1a1:26744:32)

at PageLayoutViewer2.addVisiblePage (@syncfusion_ej2-vue-documenteditor.js?v=2440f1a1:26740:12)

at PageLayoutViewer2.updateVisiblePages (@syncfusion_ej2-vue-documenteditor.js?v=2440f1a1:26705:14)

at PageLayoutViewer2.updateScrollBars (@syncfusion_ej2-vue-documenteditor.js?v=2440f1a1:26695:10)

at DocumentHelper2.updateViewerSize (@syncfusion_ej2-vue-documenteditor.js?v=2440f1a1:24672:23)

at DocumentEditor2.resize (@syncfusion_ej2-vue-documenteditor.js?v=2440f1a1:144384:29)

Renderer2.renderParagraphWidget @ @syncfusion_ej2-vue-documenteditor.js?v=2440f1a1:18823

Renderer2.renderWidget @ @syncfusion_ej2-vue-documenteditor.js?v=2440f1a1:18756

Renderer2.render @ @syncfusion_ej2-vue-documenteditor.js?v=2440f1a1:18650

Renderer2.renderWidgets @ @syncfusion_ej2-vue-documenteditor.js?v=2440f1a1:18448

PageLayoutViewer2.renderPage @ @syncfusion_ej2-vue-documenteditor.js?v=2440f1a1:26744

PageLayoutViewer2.addVisiblePage @ @syncfusion_ej2-vue-documenteditor.js?v=2440f1a1:26740

PageLayoutViewer2.updateVisiblePages @ @syncfusion_ej2-vue-documenteditor.js?v=2440f1a1:26705

PageLayoutViewer2.updateScrollBars @ @syncfusion_ej2-vue-documenteditor.js?v=2440f1a1:26695

DocumentHelper2.updateViewerSize @ @syncfusion_ej2-vue-documenteditor.js?v=2440f1a1:24672

DocumentEditor2.resize @ @syncfusion_ej2-vue-documenteditor.js?v=2440f1a1:144384

(anonym) @ @syncfusion_ej2-vue-documenteditor.js?v=2440f1a1:34945

setTimeout (async)

CommentReviewPane2.reviewPaneHelper @ @syncfusion_ej2-vue-documenteditor.js?v=2440f1a1:34943

Observer2.notify @ chunk-UK2KNJTP.js?v=2440f1a1:3356

Component2.notify @ chunk-UK2KNJTP.js?v=2440f1a1:6788

CommentPane2.updateCommentStatus @ @syncfusion_ej2-vue-documenteditor.js?v=2440f1a1:35464

CommentPane2.clear @ @syncfusion_ej2-vue-documenteditor.js?v=2440f1a1:35482

CommentReviewPane2.clear @ @syncfusion_ej2-vue-documenteditor.js?v=2440f1a1:35211

DocumentHelper2.clearDocumentItems @ @syncfusion_ej2-vue-documenteditor.js?v=2440f1a1:23819

DocumentEditor2.clearPreservedCollectionsInViewer @ @syncfusion_ej2-vue-documenteditor.js?v=2440f1a1:143985

DocumentEditor2.open @ @syncfusion_ej2-vue-documenteditor.js?v=2440f1a1:144336

(anonym) @ DocumentEditor.vue?t=1679941094753:24

Promise.then (async)

loadDocument @ DocumentEditor.vue?t=1679941094753:22

(anonym) @ chunk-MSJUUHYF.js?v=2440f1a1:7798

callWithErrorHandling @ chunk-MSJUUHYF.js?v=2440f1a1:1570

callWithAsyncErrorHandling @ chunk-MSJUUHYF.js?v=2440f1a1:1578

callWithAsyncErrorHandling @ chunk-MSJUUHYF.js?v=2440f1a1:1588

invoker @ chunk-MSJUUHYF.js?v=2440f1a1:7785

155@syncfusion_ej2-vue-documenteditor.js?v=2440f1a1:74207 Uncaught TypeError: Cannot read properties of undefined (reading 'containerWidget')

at Selection3.get [as isInShape] (@syncfusion_ej2-vue-documenteditor.js?v=2440f1a1:74207:44)

at DocumentHelper2.checkFloatingItems (@syncfusion_ej2-vue-documenteditor.js?v=2440f1a1:25026:43)

at DocumentHelper2.getLineWidgetInternal (@syncfusion_ej2-vue-documenteditor.js?v=2440f1a1:24867:30)

at DocumentHelper2.getLineWidget (@syncfusion_ej2-vue-documenteditor.js?v=2440f1a1:24829:17)

at DocumentHelper2.onMouseMoveInternal (@syncfusion_ej2-vue-documenteditor.js?v=2440f1a1:22981:28)

get @ @syncfusion_ej2-vue-documenteditor.js?v=2440f1a1:74207

DocumentHelper2.checkFloatingItems @ @syncfusion_ej2-vue-documenteditor.js?v=2440f1a1:25026

DocumentHelper2.getLineWidgetInternal @ @syncfusion_ej2-vue-documenteditor.js?v=2440f1a1:24867

DocumentHelper2.getLineWidget @ @syncfusion_ej2-vue-documenteditor.js?v=2440f1a1:24829

DocumentHelper2.onMouseMoveInternal @ @syncfusion_ej2-vue-documenteditor.js?v=2440f1a1:22981

@syncfusion_ej2-vue-documenteditor.js?v=2440f1a1:18823 Uncaught TypeError: Cannot read properties of undefined (reading 'children')

at Renderer2.renderParagraphWidget (@syncfusion_ej2-vue-documenteditor.js?v=2440f1a1:18823:35)

at Renderer2.renderWidget (@syncfusion_ej2-vue-documenteditor.js?v=2440f1a1:18756:12)

at Renderer2.render (@syncfusion_ej2-vue-documenteditor.js?v=2440f1a1:18650:12)

at Renderer2.renderWidgets (@syncfusion_ej2-vue-documenteditor.js?v=2440f1a1:18448:12)

at PageLayoutViewer2.renderPage (@syncfusion_ej2-vue-documenteditor.js?v=2440f1a1:26744:32)

at PageLayoutViewer2.addVisiblePage (@syncfusion_ej2-vue-documenteditor.js?v=2440f1a1:26740:12)

at PageLayoutViewer2.updateVisiblePages (@syncfusion_ej2-vue-documenteditor.js?v=2440f1a1:26705:14)

at PageLayoutViewer2.updateScrollBars (@syncfusion_ej2-vue-documenteditor.js?v=2440f1a1:26695:10)

at DocumentHelper2.updateViewerSize (@syncfusion_ej2-vue-documenteditor.js?v=2440f1a1:24672:23)

at @syncfusion_ej2-vue-documenteditor.js?v=2440f1a1:22876:17

Renderer2.renderParagraphWidget @ @syncfusion_ej2-vue-documenteditor.js?v=2440f1a1:18823

Renderer2.renderWidget @ @syncfusion_ej2-vue-documenteditor.js?v=2440f1a1:18756

Renderer2.render @ @syncfusion_ej2-vue-documenteditor.js?v=2440f1a1:18650

Renderer2.renderWidgets @ @syncfusion_ej2-vue-documenteditor.js?v=2440f1a1:18448

PageLayoutViewer2.renderPage @ @syncfusion_ej2-vue-documenteditor.js?v=2440f1a1:26744

PageLayoutViewer2.addVisiblePage @ @syncfusion_ej2-vue-documenteditor.js?v=2440f1a1:26740

PageLayoutViewer2.updateVisiblePages @ @syncfusion_ej2-vue-documenteditor.js?v=2440f1a1:26705

PageLayoutViewer2.updateScrollBars @ @syncfusion_ej2-vue-documenteditor.js?v=2440f1a1:26695

DocumentHelper2.updateViewerSize @ @syncfusion_ej2-vue-documenteditor.js?v=2440f1a1:24672

(anonym) @ @syncfusion_ej2-vue-documenteditor.js?v=2440f1a1:22876

setTimeout (async)

DocumentHelper2.onWindowResize @ @syncfusion_ej2-vue-documenteditor.js?v=2440f1a1:22874

51@syncfusion_ej2-vue-documenteditor.js?v=2440f1a1:74207 Uncaught TypeError: Cannot read properties of undefined (reading 'containerWidget')

at Selection3.get [as isInShape] (@syncfusion_ej2-vue-documenteditor.js?v=2440f1a1:74207:44)

at DocumentHelper2.checkFloatingItems (@syncfusion_ej2-vue-documenteditor.js?v=2440f1a1:25026:43)

at DocumentHelper2.getLineWidgetInternal (@syncfusion_ej2-vue-documenteditor.js?v=2440f1a1:24867:30)

at DocumentHelper2.getLineWidget (@syncfusion_ej2-vue-documenteditor.js?v=2440f1a1:24829:17)

at DocumentHelper2.onMouseMoveInternal (@syncfusion_ej2-vue-documenteditor.js?v=2440f1a1:22981:28)

Does anyone has an idea why this happens just for certain files to are loading perfectly fine in the demo document editor?

Thanks

[Kavitha Muralitharan]

Hi Tom,

We suspect that the reported problems are might be due to the contents in the input word document which used at your end. We need to investigate with the contents in your input Word document to reproduce the exact problem at our end. So, could you please provide us the input Word document which used at your end and share the sample and details of issue if you faced any in console. Thereby, we will analyze further and provide you the appropriate solution at the earliest.

Note: If you have any confidential data in your Word document, please replace with some dummy data and provide us the same. We just need your document to recreate the problem you face.

Regards,

Kavitha M

[Tom]

Hi,

thanks for your reply. I added the word document and the pieces of code i'm using.

As mentioned, it's interesting that this exact document get's loaded by the demo document editor on your website. I also guess it is somehow related to the document, but why is it loading fine in your editor? :D

Thank you.

Attachment: files_2e91200d.zip

[Kavitha Muralitharan]

Hi Tom,

Currently, we are checking this scenario and will update details by March 30, 2023.

Regards,

Kavitha M

[Kavitha Muralitharan]

Hi Tom,

We can reproduce the reported issue with provided document. Currently, we are validating and will get back to you by April 3, 2023.

Regards,

Kavitha M

[Suriya Murugan]

Tom, we will check and update details by April 6, 2023

[Suriya Murugan]

Tom, we are facing this issue only vue3 because of proxy in vue3. We are facing some complexity in finalizing the solution. Currently, we are working on it with high priority. 

We will update further details once validated.

[Suriya Murugan]

Tom, We will resolve the issue in our upcoming EJ2 release which is expected on April 19, 2023.

[Suriya Murugan]

Tom, You can can track the status of bug through below feedback link:

https://www.syncfusion.com/feedback/42859/performance-issue-in-vue-3

[carlos mendez]

Hi there getting the same problem ,

TypeError: Cannot read properties of undefined (reading 'height')

also i get other errors

using VUE  2.7.4 + quasar  1.22.9   but the funny thing it happens only on the code when is compiled as production,

development environments  works fine (no errors)

tested with this 2 versions of the editor  20.4.54  &   21.1.37  and happens the same on BOTH

[Tom]

Hi,

thanks for taking care, seems to be fixed with the newest version. 👍

Best

Tom

[carlos mendez]

Version 21.1.39 has done the trick, no more errors

Thanks

[Suriya Murugan]

Carlos and Tom, we are glad to hear that your issue has been resolved.