Next.js ve TypeScript ile react-pdf-viewer Paketi Kurulumu Sırasında "canvas.node" Hatası Alıyorum
Merhaba,
Next.js projesinde TypeScript kullanarak "react-pdf-viewer" paketini entegre etmeye çalışıyorum ancak kurulum sırasında bir sorunla karşılaşıyorum. Paketi npm üzerinden indirdim ve dökümantasyondaki adımları takip ettim. Ancak projemi derlediğimde aşağıdaki hata ile karşılaşıyorum:
Copy code
Failed to compile
./node_modules/canvas/build/Release/canvas.node
Module parse failed: Unexpected character '�' (1:2)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.
(Source code omitted for this binary file)
This error occurred during the build process and can only be dismissed by fixing the error.
Save to grepper
Bu hatayı nasıl çözebilirim? Sorunun kaynağı ve çözümü hakkında önerileriniz var mı?
Adımlar:
Proje dizinine gidip terminali açtım.
npm install react-pdf-viewer komutunu çalıştırarak paketi indirdim.
Dökümantasyonda belirtilen adımları izleyerek paketi projeme ekledim.
Projeyi derlediğimde yukarıdaki hatayı aldım.
Projem Hakkında:
Next.js ve TypeScript kullanıyorum.
Diğer paketlerde herhangi bir sorun yaşamıyorum, bu sadece "react-pdf-viewer" paketinde meydana geliyor.
Webpack konfigürasyonuma elle müdahale etmem gerekip gerekmediğini bilmiyorum.
Herhangi bir yardım veya öneri için şimdiden teşekkür ederim!
ReaderPdf component
import React from 'react';
// Import Worker
// Import the main Viewer component
import {Viewer, Worker} from "@react-pdf-viewer/core";
// Import the styles
import "@react-pdf-viewer/core/lib/styles/index.css";
// default layout plugin
// @ts-ignore
import {defaultLayoutPlugin} from "@react-pdf-viewer/default-layout";
// Import styles of default layout plugin
import "@react-pdf-viewer/default-layout/lib/styles/index.css";
const ReaderPdf = () => {
const defaultLayoutPluginInstance = defaultLayoutPlugin();
const pdfFile = "/public/upload/pdf/198727.pdf"
return (
<>
{pdfFile && (
<Worker workerUrl="https://unpkg.com/[email protected]/build/pdf.worker.min.js">
<Viewer
fileUrl={pdfFile}
plugins={[defaultLayoutPluginInstance]}
></Viewer>
</Worker>
)}
</>
)
};
export default ReaderPdf;
Soru hatalı mı? 👎
Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!