Next JS integration Issue

Technical Support WebViewer
,
1

WebViewer Version: “@pdftron/webviewer”: “^8.10.0”,

I have tried to implement in NextJs but I am getting error :Error: Two instances of WebViewer were created on the same HTML element. Please create a new element for each instance of WebViewer pdftron in nextjs.

const viewer = useRef(null);

//const viewer = useRef();
const instance = useRef();

useEffect(() => {

const loadWebViewer = async () => {
  const WebViewer = (await import('@pdftron/webviewer')).default;
  //       // import('@pdftron/webviewer').then(() => {
  WebViewer(
    {
      path: '/lib',
      initialDoc: `/${filePath}`,
      disabledElements: [
        'viewControlsButton',
        'viewControlsOverlay',
      ]
    },
    viewer.current,
  ).then((instance) => {
    const { docViewer } = instance;
 

  });
  // });
}

loadWebViewer();

}, [filePath]);

React sample
2

Hi there,

Thank you for reaching out to WebViewer support forums,

Are you calling loadWebViewer twice in your project?
Whenever you instantiate WebViewer, it will be created as an iframe under the HTML element: PDFTron Systems Inc. | Documentation

If you are intending to use 2 instances of WebViewer, please use unique HTML element to mount WebViewer to.

We also have a guide on NextJS integration:

Best regards,
Kevin Kim