v2.5.2
Giriş yap

Next.js ve TypeScript ile react-pdf-viewer Paketi Kurulumu Sırasında "canvas.node" Hatası Alıyorum

hakankorkz
224 defa görüntülendi

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;

Cevap yaz
Cevaplar (0)
Henüz kimse cevap yazmadı. İlk cevap yazan sen ol!