Fixing some race conditions of the imports

Author: mikecousins

packages/react-pdf-js/src/index.tsx

@@ -84,16 +84,6 @@ export const usePdf = ({
     onPageRenderFailRef.current = onPageRenderFail;
   }, [onPageRenderFail]);
 
-  useEffect(() => {
-    if (typeof window === 'undefined') return;
-
-    import('pdfjs-dist').then(({ GlobalWorkerOptions, version }) => {
-      GlobalWorkerOptions.workerSrc =
-        workerSrc ||
-        `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${version}/pdf.worker.mjs`;
-    });
-  }, [workerSrc]);
-
   useEffect(() => {
     if (typeof window === 'undefined') return;
 
@@ -103,23 +93,31 @@ export const usePdf = ({
       config.cMapPacked = cMapPacked;
     }
 
-    import('pdfjs-dist').then(({ getDocument }) => {
-      getDocument(config).promise.then(
-        (loadedPdfDocument) => {
-          setPdfDocument(loadedPdfDocument);
-
-          if (isFunction(onDocumentLoadSuccessRef.current)) {
-            onDocumentLoadSuccessRef.current(loadedPdfDocument);
+    import('pdfjs-dist').then(
+      ({ GlobalWorkerOptions, getDocument, version }) => {
+        // Set worker source first
+        GlobalWorkerOptions.workerSrc =
+          workerSrc ||
+          `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${version}/pdf.worker.mjs`;
+
+        // Then load the document
+        getDocument(config).promise.then(
+          (loadedPdfDocument) => {
+            setPdfDocument(loadedPdfDocument);
+
+            if (isFunction(onDocumentLoadSuccessRef.current)) {
+              onDocumentLoadSuccessRef.current(loadedPdfDocument);
+            }
+          },
+          () => {
+            if (isFunction(onDocumentLoadFailRef.current)) {
+              onDocumentLoadFailRef.current();
+            }
           }
-        },
-        () => {
-          if (isFunction(onDocumentLoadFailRef.current)) {
-            onDocumentLoadFailRef.current();
-          }
-        }
-      );
-    });
-  }, [file, withCredentials, cMapUrl, cMapPacked]);
+        );
+      }
+    );
+  }, [file, withCredentials, cMapUrl, cMapPacked, workerSrc]);
 
   useEffect(() => {
     // draw a page of the pdf