Multiple PDFTron Webviewer instances

I am using PDFTron WebViewer in my react application so the story is that I wanna show new pdf on the viewer whenever user selects a pdf from the list in the same component.

So whenver user selects a document state changes, created a new instance of Webviewer() and store it in a variable of useRef<HTMLDivElement>() and with useEffect() cleanup function to dispose the previous instance to load new document.

But on the new instance pdf is not visible. On the first selection of pdf it does but as soon as new pdf is selected I get into this errror which is strange to me.

Here is the code of my PDFTronWebViewer component.

const PDFTronWebViewer: React.FC<Props> = (props: Props) => {
  const viewer = useRef<HTMLDivElement>(null);
  const instance = useRef<WebViewerInstance>();
  const docView = useRef<Core.DocumentViewer>();

  useEffect(() => {

        path: '/webviewer/lib',
    ).then((inst) => {
      const { documentViewer } = inst.Core;
      instance.current = inst;
      docView.current = documentViewer;
      inst.UI.loadDocument(props.doc, {
        props.cb.bind(null, documentViewer.getDocument(), inst)

// cleanup
    return () => {
     if(instance.current && docView.current){
  }, []);

  return (
        style={{ width: props.width, height: '100vh' }}

Hello, I’m Ron, an automated tech support bot :robot:

While you wait for one of our customer support representatives to get back to you, please check out some of these documentation pages:


Hi there,

Could you provide the error you are getting in the console log?

We also recommend to reuse the original instance of WebViewer whenever possible.

Best Regards,
Zach Serviss
Web Development Support Engineer
PDFTron Systems, Inc.