Fix issue with react-pdf-viewer unmount and make sure that examples are not being analyzed/transpiled by next.js

Author: bobsingor

viewers/react/src/index.tsx

@@ -78,29 +78,45 @@ export const PDFViewer = forwardRef(function PDFViewer(
   useEffect(() => {
     if (!containerRef.current) return;
 
+    // Track if this effect instance is still active (for Strict Mode)
+    let isActive = true;
+
+    // IMPORTANT: Capture the container reference in a closure
+    // This ensures we can clean up even after React unmounts the component
+    const containerElement = containerRef.current;
+
     // Initialize the viewer with the config prop
     const viewer = EmbedPDF.init({
       type: 'container',
-      target: containerRef.current,
+      target: containerElement,
       ...config,
     });
 
     if (viewer) {
       viewerRef.current = viewer;
       onInit?.(viewer);
 
-      // Call onReady when registry is available
+      // Call onReady when registry is available, but only if still active
       if (onReady) {
-        viewer.registry.then(onReady);
+        viewer.registry.then((registry) => {
+          // Only call onReady if this effect instance is still active
+          // This prevents stale callbacks in React Strict Mode
+          if (isActive) {
+            onReady(registry);
+          }
+        });
       }
     }
 
     return () => {
-      // Cleanup: remove the viewer element
-      if (viewerRef.current && containerRef.current) {
-        containerRef.current.innerHTML = '';
-        viewerRef.current = null;
-      }
+      // Mark this effect instance as inactive
+      isActive = false;
+
+      // Cleanup: remove the viewer element using captured reference
+      // We use the captured containerElement instead of containerRef.current
+      // because React may have already unmounted and cleared the ref
+      containerElement.innerHTML = '';
+      viewerRef.current = null;
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);

website/next.config.ts

@@ -75,16 +75,27 @@ const withNextra = nextra({
   },
 })
 
+// Pre-built example packages that should NOT be analyzed/transpiled by Next.js.
+// These packages use Vue/Svelte and have their own build process.
+// Next.js has issues with `export *` re-exports across package boundaries,
+// which causes sporadic "Attempted import error" failures.
+const EXTERNAL_EXAMPLE_PACKAGES = [
+  '@embedpdf/example-vue-tailwind',
+  '@embedpdf/example-svelte-tailwind',
+]
+
 // Export a function that handles phase-specific logic and merges with Nextra
 export default async (phase: string) => {
   // Build config with env
   const nextConfig: NextConfig = {
     env: {
       NEXT_PUBLIC_SNIPPET_VERSION: SNIPPET_VERSION,
     },
+    // Mark Vue/Svelte example packages as external for server-side bundling
+    serverExternalPackages: EXTERNAL_EXAMPLE_PACKAGES,
   }
 
-  // Add transpilePackages in development
+  // Add transpilePackages in development (but exclude the pre-built examples)
   if (phase === 'phase-development-server') {
     const fs = await import('node:fs')
     const allFiles = globSync('../packages/*/package.json')
@@ -99,6 +110,8 @@ export default async (phase: string) => {
         }
       })
       .filter((pkg: string) => pkg?.startsWith('@embedpdf'))
+      // Explicitly exclude the example packages from transpilation
+      .filter((pkg: string) => !EXTERNAL_EXAMPLE_PACKAGES.includes(pkg))
 
     nextConfig.transpilePackages = packageNames
   }