How to use CoreControls?

[timnlupo]

Hi all! Trying to use CoreControls to create a doc viewer with my own UI (like this). Unfortunately, window.CoreControls seems to be undefined. Any ideas for a solution?

Here is my code.

useEffect(() => {
    import("@pdftron/webviewer").then(() => {
      const CoreControls = window.CoreControls;
      CoreControls.setWorkerPath("/webviewer/lib");
      CoreControls.enableFullPDF(true);

      const docViewer = new CoreControls.DocumentViewer();
      docViewer.setViewerElement(viewer.current);
      docViewer.setOptions({ enableAnnotations: true });
      docViewer.loadDocument(
        "https://pdftron.s3.amazonaws.com/downloads/pl/demo-annotated.pdf"
      );

      setDocViewer(docViewer);

      docViewer.on("documentLoaded", () => {
        console.log("document loaded");
        docViewer.setToolMode(docViewer.getTool("AnnotationEdit"));
      });
    })
  }, []);

Thanks so much.

[timnlupo]

Adding the following to head in _app.tsx seemed to fix the issue

<script src="/webviewer/lib/core/webviewer-core.min.js"></script>
<script src="/webviewer/lib/core/pdf/PDFNet.js"></script>

However, now I'm getting the following error

ChunkLoadError: Loading chunk 7 failed.
(error: http://localhost:3000/webviewer/lib/ExternalPdfPartRetriever.chunk.js)

Looks like this has been solved before however I can't seem to get it working. I've tried /webserver/lib. /webserver, /pdftron to no avail.

Any way I can get a more verbose output?

[mparizeau-pdftron]

What's the correct path where the WebViewer lib folder is hosted on your local server? Note that the setWorkerPath API wants to know the path to the core library, so you would likely need to include core as part of your path.