在 next-js 应用程序中使用 React-pdf 时未找到命名导出“PDFDataRangeTransport”

Question

您好，我正在尝试在下一个应用程序中使用react-pdf 渲染pdf，但面临以下问题：

语法错误：未找到命名导出“PDFDataRangeTransport”。请求的模块“pdfjs-dist”是一个 CommonJS 模块，它可能不支持所有 module.exports 作为命名导出。 CommonJS 模块始终可以通过默认导出导入，例如使用：

从“pdfjs-dist”导入 pkg； const { PDFDataRangeTransport } = pkg;

import {pdfjs} from 'react-pdf';
import {Document, Page} from 'react-pdf';


export const CaseFile = (props: { caseId: any, doctors: Array<any>, stateTracker: any }) => {

    const [records, setRecords] = useState([])
    const [caseDetails, setCaseDetails] = useState<any>()
    const [auditEntries, setAuditEntries] = useState<Array<any>>([])
    const [numPages, setNumPages] = useState(null);

    function onDocumentLoadSuccess({numPages: nextNumPages}) {
        setNumPages(nextNumPages);
    }


    pdfjs.GlobalWorkerOptions.workerSrc = new URL(
        'pdfjs-dist/build/pdf.worker.min.js',
        import.meta.url,
    ).toString();

    function getDischargeSummaryView() {
            return <div className="p-4">
                      <Document file={"/api/s3/download/?file=something.pdf"}
                                          onLoadSuccess={onDocumentLoadSuccess}>
                                    {Array.apply(null, Array(numPages))
                                        .map((x, i) => i + 1)
                                        .map((page, i) => <Page key={i} pageNumber={page} renderTextLayer={false}
                                                                renderAnnotationLayer={false}/>)}
                                </Document>
                    </div>         
   }
   return (
        <>
            {getDischargeSummaryView()}
        </>
    )
}

我更新了next.config.js

webpack(config, options) {
        config.module.rules.push({
                test: /\.node/,
                use: 'raw-loader',
            },
            {
                test: /\.mp3$/,
                use: {
                    loader: 'file-loader',
                },
            });
        return config;
    },

在分页加载时出现问题aaoears，但是，如果我不使用文档并让页面呈现并再次添加文档，它就会正确呈现。