Hi I am trying to render pdf using react-pdf in my next app, but facing the following issue:
SyntaxError: Named export 'PDFDataRangeTransport' not found. The requested module 'pdfjs-dist' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:
import pkg from 'pdfjs-dist';
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()}
</>
)
}
```
I updated the next.config.js
```
webpack(config, options) {
config.module.rules.push({
test: /\.node/,
use: 'raw-loader',
},
{
test: /\.mp3$/,
use: {
loader: 'file-loader',
},
});
return config;
},
While paging the load the issue aaoears, However if i dont use the Document and let the page render and add the Document again, it renders correctly.
