Copied Quickstart but kept getting this error: Cannot redefine property: BlobProvider

[imviancagrace]

Describe the bug
I have a NextJs project where I want to utilize react-pdf/renderer to generate dynamic PDFs. I tried to set it up with quickstart to see how it works but I can't get my page to load properly with PDFViewer or PDFDownloadLink components. I keep getting this error Cannot redefine property: BlobProvider.

To Reproduce
Steps to reproduce the behavior including code snippet (if applies):

page.tsx

import { PDFDownloadLink } from "@react-pdf/renderer";
import Invoice from "@/app/ui/print/invoice";

export default function Page() {
    return (
        <div>
            <PDFDownloadLink document={<Invoice />} fileName="somename.pdf">
                {({ blob, url, loading, error }) =>
                    loading ? 'Loading document...' : 'Download now!'
                }
            </PDFDownloadLink>
        </div>
    );
}

invoice.tsx

import React from 'react';
import { Image, Text, View, Page, Document, StyleSheet } from '@react-pdf/renderer';

const Invoice = () => {
    return (
        <Document>
            <Page size="A4">
                <Text> HELLO </Text>
            </Page>
        </Document>
    )
}
export default Invoice

You can make use of react-pdf REPL to share the snippet

Expected behavior
See the PDF Viewer with my Document as shown in Quick Start.

Screenshots

Desktop:

• MacOS
• Chrome
• React-pdf v3.4