Uncaught (in promise) TypeError: l.domNode.getBoundingClientRect is not a function

Technical Support WebViewer
, ,
1

WebViewer Version: 8.11, 10.0.1, 10.1.0,

Do you have an issue with a specific file(s)? No

Can you reproduce using one of our samples or online demos? No

Are you using the WebViewer server? No

Does the issue only happen on certain browsers? Reproduces on both Edge and Google Chrome

Is your issue related to a front-end framework? We are using React

Is your issue related to annotations? It is happening when tagging someone in an annotation.

Please give a brief summary of your issue:
I edit an annotation and type the ‘@’ character. When I do that, I get the error “Uncaught (in promise) TypeError: l.domNode.getBoundingClientRect is not a function.”

Please describe your issue and provide steps to reproduce it:
I type ‘@’ and am met with this error in the console:
image

Also, the list of names I am expecting does not get rendered. If I debug, I can see that the method defined in setMentionCallback is called and is returning the list of names. The error seems to happen after this callback returns but before the list of names is rendered.

I used the debugger to see where the failure is happening. This is the location:
image

Currently, “o instanceof Text” is returning false and so execution is falling to l.domNode.getBoundingClientRect(). However, when I compare the o.constructor.prototype to Text.prototype, they look the same:
image

I think o instanceof Text should return true, in which case f.getBoundingClientRect would be called instead.

Interestingly, if I check to see if o is an instance of top.Text, I do get true:
image

This lends further evidence to the idea o really is a Text. I am not sure why one of these returns false while the other returns true. Could it be related to the context in which o is created?

Please provide a link to a minimal sample where the issue is reproducible:
I do not have this at this time.

1 Like
2

Hi Sherrel
Thanks for contacting us for support.
Can I know how did you set users?
I have tried setUsers by implementing

instance.UI.mentions.setUserData([
    {
      value: 'John Doe',
    },
    {
      value: 'Jane Doe',
      email: 'jDoe@gmail.com'
    }
  ]);

Screen Recording 2023-05-30 at 8.45.23 PM

Please let me know if it works for you. If not, could please provide sample code snippet for me to reproduce your issue?

Best,
Jack

1 Like
3

Hey Jack,

I replaced my current setUserData with this as suggested above:

instance.current.UI.mentions.setUserData([
{
value: ‘John Doe’,
},
{
value: ‘Jane Doe’,
email: ‘jDoe@gmail.com’,
},
])

After that, when I type @ into a comment, I still do not get a list:
image

I also still see this error in the console:
image

By using the debugger, the error is still coming from this area of code:
image

The same behavior is happening, even with the hard-coded list.

Thanks,
Sherrel

1 Like
4

Hi Sherrel
Can I know how you set up your react environment?
I tried to use the react sample GitHub - PDFTron/webviewer-react-sample: Sample to demonstrate integrating WebViewer into React with code the setUsers. Also I used the latest 10.0.1 version nightly build PDFTron Systems Inc. | Nightly. It still works fine on my end.
Please let me know if there is any extra code there I didn’t aware

Best
Jack

1 Like
5

Hey Jack,

I simplified the page that hosts the web viewer. I am still getting the error when I type the ‘@’. Here is the code:

import React, { useEffect, useRef } from 'react'
import WebViewer from '@pdftron/webviewer'

import { MarkupToolData } from '../apiClient/createMarkupTool/types'

interface Props extends Omit<MarkupToolData, 'name'> {
	fileVersionId: string
}

export default (props: Props) => {
	const { documentUri, viewerDisabledFeatures, fileExtension } = props

	const viewer = useRef(null)
	const instance = useRef(null)

	useEffect(() => {
		WebViewer(
			{
				licenseKey: window.atob(
					'THIS HAS BEEN REMOVED',
				),
				path: process.env.NODE_ENV === 'production' ? '/dam/webviewer' : '/',
				disabledElements: viewerDisabledFeatures,
				enableMeasurement: true,
			},
			viewer.current,
		).then((inst) => {
			instance.current = inst
			instance.current.Core.disableEmbeddedJavaScript()

			instance.current.UI.loadDocument(documentUri, {
				extension: fileExtension,
			})
			const { annotationManager } = instance.current.Core

			instance.current.UI.setHeaderItems(
				(header: {
					getHeader: (
						arg0: string,
					) => { type: string; toolGroup: string; dataElement: string; title: string }[]
				}) => {
					/**
					 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
					 * Push the callout tool button into the Annotate group
					 */
					header.getHeader('toolbarGroup-Annotate').push({
						type: 'toolGroupButton',
						toolGroup: 'calloutTools',
						dataElement: 'calloutToolGroupButton',
						title: 'annotation.callout',
					})
				},
			)

			annotationManager.setAnnotationDisplayAuthorMap((authorUserId: { toString: () => string }) => {
				return 'Sherrel Harris'
			})

			instance.current.UI.mentions.setUserData([
				{
					value: 'John Doe',
				},
				{
					value: 'Jane Doe',
					email: 'jDoe@gmail.com',
				},
			])
		})
	}, [])

	return <div className="webviewer" ref={viewer} style={{ width: '100%', height: '100%' }}></div>
}
1 Like
6

Hey Jack,

I found out one more thing. If I run the app in a Chrome Incognito window, I do NOT get the error. It seems to run fine in that case. I then disabled all extensions, closed all Chrome windows, and then re-loaded the app in a regular Chrome window. I still see the error. I also tried clearing cached data and cookies, but that did not help either. Still, I thought it was interesting that the app does run in an Incognito window.

I also tried the app in an Edge InPrivate window. Once again, the app runs without error in this type of window but has the error in a regular window.

Sherrel

1 Like
7

Hi Sherrel
It’s really a tricky issue.
I think it should be related to your environment. Did you try to use this sample to reproduce your issue? GitHub - PDFTron/webviewer-react-sample: Sample to demonstrate integrating WebViewer into React

Best
Jack

1 Like
8

Hey Jack,

I found this video from Apryse:
How to add PDF viewing and editing in React App with TypeScript - YouTube

I followed the steps he discusses in that video to create a new app from scratch. Tagging works fine in that app.

Sherrel

1 Like
9

Hi Sherrel
Great to know!
Please let me know if you have more related issue.

Best,
Jack

1 Like
10

Hey Jack,

Tagging works fine in the test app I created, but I still see an error in our production app. Have there been any other cases involving instanceof not working correctly?

Sherrel

1 Like
11

Hey @jhou

I have some more info related to my issue. I set a breakpoint to just before the failure and inspected the “o” object. In a regular Chrome window, I see the following:
image




When I inspect that same object in a Chrome incognito window, I see this:
image

I noticed that in the case where the list does not appear, o contains these two attributes:

  • __jaco_node_map_id__
  • __jaco_should_censor__

In the incognito window (where the code functions correctly), these two attributes are not present. What are these attributes and what does their presence signify?

Another question: is there a way to turn on enriched logging that might help track what is happening?

Sherrel

1 Like
12

Hello SherrelHarris,

__jaco_node_map_id__
__jaco_should_censor__

Are not apart of WebViewer, it could be a Chrome extension on your browser that could be causing this. This would also explain why this is working on Incognito.

Best regards,
Tyler

1 Like
13

Hey @tgordon

I checked my Chrome extensions and found three. I disabled them all:

image
image1370×500 35.9 KB

After that I closed down all Chrome windows. I started chrome back up and I still see those odd attributes. Maybe they are not related to the issue I am having. I wanted to post them in case they meant something to someone.

I also tried clearing browing history, cookies, and cache with the “all time” filter applied to no avail.

Thanks,
Sherrel

1 Like
14

Hello SherrelHarris,

Thats unexpected! do you have an antivirus? can you try on a different computer?

Best regards,
Tyler

1 Like
15

Hello @tgordon

I set up a lab a few days ago and our product owner tried the tagging functionality and saw the same errors I am seeing locally. Today, I set up a new lab and one of our QA engineers tried and also is seeing the same errors.

As far as antivirus, I do have that running. I tried to shut it off temporarily, but I don’t have permission to do that. I will have to find out who can change that so I can see if that is a factor.

1 Like
16

Hello @SherrelHarris, any luck getting it to work?

1 Like
17

Hi Sherrel,

Following up from your last message, could you please share a minimal runnable sample project for us to reproduce and debug the issue?

The error message you get could be coming from this line:

But without the project, it is difficult to determine exactly where the issue is coming from.

Best regards,
Kevin Kim

1 Like
18

Hey Kevin (@kkim)

I have created a couple of standalone apps but have not yet been able to replicate the error in those.

I have some more info related to this error. I believe the issue is happening in this code:
image
Figure 1

If o is a Text object, the code in red should execute. Otherwise the code in blue should execute. If I put a breakpoint on o instanceof Text and evaluate that in the debugger, I get false which means the blue code executes. I believe the red code should execute instead. Here is why.

Firstly, look at the properties of o:
image
Figure 2

The nodeName is #text, and the nodeType is 3, which is a text node. In the second place, “o instanceof top.Text”, evaluates to true:
image
Figure 3

So o is a Text object…it appears it’s a Text object that was created in another document/window or something.

As far as where this code exists…I believe the Apryse web viewer uses the Quill editor. Check this code out. If you follow this link (https://github.com/quilljs/quill/blob/develop/core/selection.ts/#L182:#L214), you should see the following code:

    let side = 'left';
    let rect: DOMRect;
    if (node instanceof Text) {
      // Return null if the text node is empty because it is
      // not able to get a useful client rect:
      // https://github.com/w3c/csswg-drafts/issues/2514.
      // Empty text nodes are most likely caused by TextBlot#optimize()
      // not getting called when editor content changes.
      if (!node.data.length) {
        return null;
      }
      if (offset < node.data.length) {
        range.setStart(node, offset);
        range.setEnd(node, offset + 1);
      } else {
        range.setStart(node, offset - 1);
        range.setEnd(node, offset);
        side = 'right';
      }
      rect = range.getBoundingClientRect();
    } else {
      if (!(leaf.domNode instanceof Element)) return null;
      rect = leaf.domNode.getBoundingClientRect();
      if (offset > 0) side = 'right';
    }
    return {
      bottom: rect.top + rect.height,
      height: rect.height,
      left: rect[side],
      right: rect[side],
      top: rect.top,
      width: 0,
    };

I think this is the un-minified version of the code in Figure 1 at the top of this response. There are a lot of similarities, like setting a variable to ‘left’ and then setting it to ‘right’ in a couple of different places. It also has the test on whether an object is ‘instanceof Text’ and returns an object containing bottom, height, left, right, top, and width properties.

I can demonstrate the issue if it would help.

Thanks,
Sherrel

1 Like
19

Hi Sherrel,

Thank you for your response,

Unfortunately, even with the Quill sample, we are unable to pinpoint where the issue comes from. If you are unable to reproduce the issue on a different environment, then it is very likely the issue is environment/configuration related. Without a reproducible sample, we are unable to troubleshoot this issue.

Here are some suggestions to further isolate the issue:

  • reproducible on specific browser: Chrome only? (not in private mode)
  • Chrome settings: Chrome flags that have been changed or settings such as hardware acceleration
  • reproducible on specific OS: Mac / Windows
  • Since getBoundingClientRect is related to viewport, could the issue be screen size dependent?
  • A fresh install of latest WebViewer (10.2 is released today)

Best regards,
Kevin Kim

1 Like
20

I have some feedback related to these bullet points:

  • reproducible on specific browser: Chrome only? (not in private mode)
    – This is happening on both Chrome and Edge on my machine. I set up a lab and the users who tried there also see the issue. I can have them try in both browsers to see if they are seeing it in both.
  • Chrome settings: Chrome flags that have been changed or settings such as hardware acceleration
    – I turned hardware acceleration off on my machine but after restarting the browser I still see the issue. I can have other users try turning this off and hitting the lab environment again…
  • reproducible on specific OS: Mac / Windows
    – I did just try this from my iPad Pro using Chrome and it works there.
  • Since getBoundingClientRect is related to viewport, could the issue be screen size dependent?
    – I will try some other screen sizes
  • A fresh install of latest WebViewer (10.2 is released today)
    – I have tried 3 versions of WebViewer, but I can try this newest one to see if anything changes.

I will try the stuff I mentioned above and report back.

Sherrel

1 Like