React-pdf Error when trying to render pdf

I am completely new to ReactJs.

I am trying to create a pdf from html. I want to show the document in the browser and then be able to download it. I am using react-pdf https://react-pdf.org/

I have the code below in which I create my PDF document and then I want to display my document with PDFViewer. This page is not my main "App" page - it is a "Client details" page to which I can navigate.

When I run this I get the following error:

TypeError: Failed to construct 'Text': Please use the 'new' operator, this DOM object constructor cannot be called as a function.

The error is here: renderWithHooks C:/Users/Marileen/Downloads/react-material-dashboard-master (1)/react-material-dashboard-master/node_modules/@react-pdf/renderer/node_modules/react-reconciler/cjs/react-reconciler.development.js:5671 with line 5671 var children = Component(props, refOrContext);

import React from "react";
import { PDFViewer } from '@react-pdf/renderer';
import { Document, Page, View } from '@react-pdf/renderer';

const PdfDocument = () => (
    <Document>
        <Page size="A4">
            <View>
                <Text>Section #1</Text>
            </View>
        </Page>
    </Document>
);

const ClientDetails = () => {
    return (<PDFViewer>
        <PdfDocument />
    </PDFViewer>);
}
export default ClientDetails;

I have tried different libraries, I've installed babel, but I don't understand how to fix the problem in Reactjs.

Please help?

Solution

After checking out the docs of react-pdf it seems like you haven't imported Text from it's library and you are using it in your component.

That's why error is thrown when you use text without importing it in this line -

<Text>Section #1</Text>

Change your -

import { Document, Page, View } from '@react-pdf/renderer'; //add Text here//

to -

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