What is wrong with this code

[ZOSUNMAN]

Select Topic Area

Question

Body

What is wrong with this code
I asked ChatGPT to write a code and the code I received is below. I ran this code in vscode and the file path doesn't seem to be a problem, but if you're curious, I can capture it and show you. The biggest problem is that when I run it, I get an error like TypeError:

Right-hand side of 'instanceof' is not an object
at Object.getDocument (pdf.min.js:22:16424)
at reader.onload (test.html:74:36).

If you know, please help me.

<title>PDF 슬라이드 + 제스처 리모컨</title> <script src="https://cdn.jsdelivr.net/npm/reveal.js/dist/reveal.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@tensorflow/[email protected]"></script> <script src="https://cdn.jsdelivr.net/npm/@teachablemachine/[email protected]/dist/teachablemachine-image.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.4.120/pdf.min.js"></script> <script> pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.4.120/pdf.worker.min.js'; </script> <style> body { margin: 0; background: black; } #upload-box { position: fixed; top: 10px; left: 10px; z-index: 999; background: white; padding: 8px; border-radius: 5px; } #webcam-container { position: fixed; top: 10px; right: 10px; width: 320px; height: 240px; border: 2px solid #ccc; background: black; z-index: 1000; } #prediction { position: fixed; top: 260px; right: 10px; width: 320px; color: white; text-align: center; font-weight: bold; z-index: 1000; } </style>

📄 PDF 파일을 업로드하세요

예측 결과: ...

<script> Reveal.initialize({ hash: true, slideNumber: true }); </script> <script> document.getElementById("file-input").addEventListener("change", async (e) => { const file = e.target.files[0]; if (!file) return; const reader = new FileReader(); reader.onload = async () => { try { const typedarray = new Uint8Array(reader.result); const pdf = await pdfjsLib.getDocument({ data: typedarray }).promise; const slides = document.getElementById("slides-container"); slides.innerHTML = ""; for (let i = 1; i <= pdf.numPages; i++) { const page = await pdf.getPage(i); const viewport = page.getViewport({ scale: 2.0 }); const canvas = document.createElement("canvas"); const context = canvas.getContext("2d"); canvas.width = viewport.width; canvas.height = viewport.height; await page.render({ canvasContext: context, viewport }).promise; const section = document.createElement("section"); section.innerHTML = `

📄 페이지 ${i} / ${pdf.numPages}

`; slides.appendChild(section); } Reveal.sync(); } catch (err) { console.error(err); alert("❌ PDF 로딩 중 오류 발생: " + err.message); } }; reader.readAsArrayBuffer(file); }); </script> <script> const URL = "https://teachablemachine.withgoogle.com/models/************/"; let model, webcam, maxPredictions; let lastGesture = "", lastTime = 0; const cooldown = 2000; async function init() { const modelURL = URL + "model.json"; const metadataURL = URL + "metadata.json"; model = await tmImage.load(modelURL, metadataURL); maxPredictions = model.getTotalClasses(); webcam = new tmImage.Webcam(320, 240, true); await webcam.setup(); await webcam.play(); document.getElementById("webcam-container").appendChild(webcam.canvas); window.requestAnimationFrame(loop); } async function loop() { webcam.update(); await predict(); window.requestAnimationFrame(loop); } async function predict() { const prediction = await model.predict(webcam.canvas); const best = prediction.reduce((a, b) => a.probability > b.probability ? a : b); document.getElementById("prediction").innerText = `예측 결과: ${best.className} (${(best.probability * 100).toFixed(1)}%)`; const now = Date.now(); if (best.className === "동작없음") { lastGesture = ""; return; } if (best.probability > 0.85 && best.className !== lastGesture && now - lastTime > cooldown) { lastGesture = best.className; lastTime = now; if (best.className === "손바닥") Reveal.next(); else if (best.className === "주먹") Reveal.prev(); else if (best.className === "브이") Reveal.toggleOverview(); } } init(); </script>

[ishantmishra03]

The error you're seeing, "TypeError: Right-hand side of 'instanceof' is not an object", usually happens because pdf.js is not being loaded properly or there is a version mismatch. Here are a few things you can try:

1. Check the PDF.js Version:

You might be using an incompatible version of pdf.js. Try using a stable version like 2.10.377:

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.min.js"></script>
<script>
  pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.worker.min.js';
</script>

[mdhossain-2437]

The error:

TypeError: Right-hand side of 'instanceof' is not an object
at Object.getDocument (pdf.min.js:22:16424)
…usually occurs when the pdfjsLib object is undefined or not properly initialized. In your code, you're using:

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.4.120/pdf.min.js"></script> <script> pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.4.120/pdf.worker.min.js'; </script>

However, in this version of PDF.js from the CDN, the global object isn't automatically exposed as pdfjsLib. So, pdfjsLib is undefined, which leads to the error you're seeing when calling getDocument().

✅ Fix
Replace the initialization with the following:

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.4.120/pdf.min.js"></script> <script> const pdfjsLib = window['pdfjs-dist/build/pdf']; pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.4.120/pdf.worker.min.js'; </script>

This correctly sets up the pdfjsLib object, allowing getDocument() to work as expected.

✅ Optional Debug Tip
To verify the object is loaded correctly, add:

console.log(pdfjsLib);
before using it. If it’s undefined, you’ll know the import failed.

[MianSaadTahir]

The error
TypeError: Right-hand side of 'instanceof' is not an object
usually means the pdfjsLib is not loaded properly or is incompatible.

✅ Fix:
Change this line:

js
Copy
Edit
const pdf = await pdfjsLib.getDocument({ data: typedarray }).promise;
To:

js
Copy
Edit
const loadingTask = pdfjsLib.getDocument({ data: typedarray });
const pdf = await loadingTask.promise;
Also, make sure pdfjsLib is defined after loading the pdf.min.js script — sometimes the variable isn't globally available.

Let me know if you need a clean version of this code.

[github-actions[bot]]

🕒 Discussion Activity Reminder 🕒

This Discussion has been labeled as dormant by an automated system for having no activity in the last 60 days. Please consider one the following actions:

1️⃣ Close as Out of Date: If the topic is no longer relevant, close the Discussion as out of date at the bottom of the page.

2️⃣ Provide More Information: Share additional details or context — or let the community know if you've found a solution on your own.

3️⃣ Mark a Reply as Answer: If your question has been answered by a reply, mark the most helpful reply as the solution.

Note: This dormant notification will only apply to Discussions with the Question label. To learn more, see our recent announcement.

Thank you for helping bring this Discussion to a resolution! 💬