plasmo icon indicating copy to clipboard operation
plasmo copied to clipboard

[BUG] How can i use pdf.js in plasmo。it's throwing an error "await is not defined."

Open LoverJoker opened this issue 1 year ago • 1 comments

What happened?

I'm using pdf.js in Plasmo, and it's throwing an error "await is not defined." I encountered a similar issue in Vite, but I resolved it by using the vite-plugin-top-level-await plugin. Is there a similar plugin for Plasmo?

import { useState, useEffect } from "react"

import * as pdfjs from 'pdfjs-dist'
import * as pdfjsWorker from "pdfjs-dist/build/pdf.worker";
import { PDFLinkService, PDFViewer, PDFFindController } from "pdfjs-dist/web/pdf_viewer";
import "pdfjs-dist/web/pdf_viewer.css";


function OptionsIndex() {
	const [data, setData] = useState("")

	useEffect(() => {
		const asyncFunc = async () => {
			pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker;
			var url = 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf';

			var loadingTask = await pdfjs.getDocument(url);
			loadingTask.promise.then(function (pdf) {
				console.log('PDF loaded');

				// Fetch the first page
				var pageNumber = 1;
				pdf.getPage(pageNumber).then(function (page) {
					console.log('Page loaded');

					var scale = 1.5;
					var viewport = page.getViewport({ scale: scale });

					// Prepare canvas using PDF page dimensions
					var canvas = document.getElementById('the-canvas');
					var context = canvas.getContext('2d');
					canvas.height = viewport.height;
					canvas.width = viewport.width;

					// Render PDF page into canvas context
					var renderContext = {
						canvasContext: context,
						viewport: viewport
					};
					var renderTask = page.render(renderContext);
					renderTask.promise.then(function () {
						console.log('Page rendered');
					});
				});
			}, function (reason) {
				// PDF loading error
				console.error(reason);
			});
		}
		asyncFunc()
	}, [])
	return (
		<div>
			<canvas id="the-canvas"></canvas>
		</div>
	)
}

export default OptionsIndex

Version

Latest

What OS are you seeing the problem on?

MacOSX

What browsers are you seeing the problem on?

Chrome

Relevant log output

options.526298b9.js:41815 Uncaught ReferenceError: await is not defined
    at 7HtXb.2c902924488e9bb7 (options.526298b9.js:41815:10)
    at newRequire (options.526298b9.js:72:24)
    at localRequire (options.526298b9.js:85:35)
    at aYaTd.react/jsx-dev-runtime (index.tsx:5:1)
    at newRequire (options.526298b9.js:72:24)
    at localRequire (options.526298b9.js:85:35)
    at fkAX2.react/jsx-dev-runtime (options.tsx:9:5)
    at newRequire (options.526298b9.js:72:24)
    at options.526298b9.js:123:5
    at options.526298b9.js:146:3

(OPTIONAL) Contribution

  • [ ] I would like to fix this BUG via a PR

Code of Conduct

  • [X] I agree to follow this project's Code of Conduct
  • [X] I checked the current issues for duplicate problems.

LoverJoker avatar Mar 24 '24 14:03 LoverJoker

I have same issue

123wwwa avatar Apr 29 '24 07:04 123wwwa