plasmo
plasmo copied to clipboard
[BUG] How can i use pdf.js in plasmo。it's throwing an error "await is not defined."
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.
I have same issue