Product:@pdftron/webviewer
Product Version:@pdftron/webviewer@11.2.0
Please give a brief summary of your issue:
iam typing to upgrage version from “@pdftron/webviewer”: “10.7.3”, to “@pdftron/webviewer”: “11.2.0” where i was facing this error
Getting NotSupportedError when trying to initialize WebViewer. Error: "Failed to execute 'define' on 'CustomElementRegistry': the name 'apryse-webviewer' has already been used with this registry."
zone-evergreen.js:2186 Uncaught NotSupportedError: Failed to execute ‘define’ on ‘CustomElementRegistry’: the name “apryse-webviewer” has already been used with this registry
at target. [as define] (zone-evergreen.js:2186:1)
at Module. (webviewer.min.js:1:13584)
at n (webviewer.min.js:1:358)
at Object. (webviewer.min.js:1:1345)
at n (webviewer.min.js:1:358)
at webviewer.min.js:1:1158
at webviewer.min.js:1:250
at webviewer.min.js:1:84
at Object.bWhD (webviewer.min.js:1:2)
at o (bootstrap:63:22)
The application fails to display the PDF viewer.
where i tried to upgrade with other version @pdftron/webviewer@10.12.0 where it is display the PDF viewer correctly.
1 Like
Hello Babu,
Thank you for contacting us.
Are you using Angular?
This error happens when the webviewer.min.js file gets pulled in twice into your application, it looks like adding it to the script causes the issue for you.
“scripts”: [“node_modules/@pdftron/webviewer/webviewer.min.js”]
Please remove webiviewer.min.js in your scripts.
Best Regards,
Darian
1 Like
Hello Darian,
Thank you for your response.
Yes, we are using Angular 11.2.2 version , but we are not including webviewer.min.js in the scripts array of angular.json. As you can see from our configuration, "scripts": [] is empty
Despite this, after upgrading from @pdftron/webviewer@10.7.3 to @pdftron/webviewer@11.2.0, we are encountering the following error when initializing WebViewer:
Uncaught NotSupportedError: Failed to execute ‘define’ on ‘CustomElementRegistry’: the name “apryse-webviewer” has already been used with this registry
Interestingly, the issue does not occur when upgrading only to @pdftron/webviewer@10.12.0.
Could you confirm whether WebViewer 11.2.0 is fully compatible with Angular 11.2.2?
Thank you for your support.
Best regards,
Babu
1 Like
Hello Babu,
We do have an Angular sample, but that is running Angular 15 without any issues. GitHub - ApryseSDK/webviewer-angular-sample: Sample to demonstrate integrating WebViewer into Angular
It seems to be an issue with how Angular is loading the node modules. In this case the entry point to the node module which is webviewer.min.js is loading twice.
Could you try adding Iframe to the WebViewer constructor? v11 loads as a web component by default.
WebViewer.Iframe(...
If possible, please provide a minimal Angular sample project to allow us to debug further. You can upload a repo onto GitHub.
Best Regards,
Darian
1 Like
Dear Darian,
Thank you for your suggestion to use the WebViewer.Iframe method to resolve the NotSupportedError. Implementing this approach has indeed resolved the initial error.
However, we’ve observed that using the iframe method introduces the annotation frame, which is not required for our application. Unfortunately, when initializing WebViewer without the iframe (i.e., using the default Web Component approach), we continue to encounter the NotSupportedError.
Could you provide guidance on how to disable the annotation frame when using the iframe method, or suggest alternative solutions to prevent the NotSupportedError while avoiding the annotation frame?
Best regards,
Babu
1 Like
Hello Babu,
I’m not quite sure what you mean by annotation frame. Could you clarify this? Images and video are helpful. I believe the web component issue is related to Angular. Have you tried updating the Angular version?
1 Like
