使用帶有反應 pdf 的 gatsby 導入 PDF，返回錯誤

Question

嘗試在 gatsby 中使用 react pdf 導入 PDF，但出現找不到文件錯誤

    import React, { useState } from 'react';
    import { Document, Page } from 'react-pdf';
    import mypdf from "../images/mypdf.pdf";
    
    export default function MyDocuments() {
        const [ numPages, setNumPages ] = useState(null);
        const [ pageNumber, setPageNumber ] = useState(1);
    
        function onDocumentLoadSuccess({ numPages }) {
            setNumPages(numPages);
            setPageNumber(1);
        }
    
        function changePage(offset) {
            setPageNumber((prevPageNumber) => prevPageNumber + offset);
        }
    
        function previousPage() {
            changePage(-1);
        }
    
        function nextPage() {
            changePage(1);
        }
    
        return (
            <div className="container">
                <Document file={mypdf} onLoadSuccess={onDocumentLoadSuccess} className="container">
                    <Page pageNumber={pageNumber} />
                </Document>
                <div className="container">
                    <p>
                        Page {pageNumber || (numPages ? 1 : '--')} of {numPages || '--'}
                    </p>
                    <button type="button" disabled={pageNumber <= 1} onClick={previousPage}>
                        Previous
                    </button>
                    <button type="button" disabled={pageNumber >= numPages} onClick={nextPage}>
                        Next
                    </button>
                </div>
            </div>
        );
    }

錯誤：

Failed to load PDF file.

Page 1 of --

已經嘗試導入資產並執行“../images/mypdf.pdf”並且我知道文件在那里，有人知道如何修復以正確顯示 PDF 嗎？