react-pdf/renderer - Cannot read properties of undefined (reading 'height')

Question

EDIT: I've implemented what I needed using jsPDF instead of react-pdf/renderer so guess below doesn't matter anymore. Will leave up in case an answer helps someone in future.

I've tried troubleshooting everything I can think of with this one and need some help!

I'm trying to render a dynamic PDF using react-pdf/renderer but I keep getting the error message "Cannot read properties of undefined (reading: 'height') in console and the PDF does not display on web page.

So initially I had used <p> elements and from searching this is a no go so I switched all of those out for the <Text> but error persists. I was also attempting to style with tailwind before but I've also been through and removed all of that to use the styling from the docs.

I'm now at a loss, can't see anything else I shouldn't be doing. I've tried commenting out the mapping and moment functions as well just in case and that made no difference.

Code is below, first snippet is where I'm trying to render and then the second snippet is the full component. It wasn't originally in the "dashboard" which is why the invoice is an empty array, just moved it here as part of my troubleshooting (also didn't help).

Any guidance will be appreciated!

import React from "react";
import { useSelector } from "react-redux";
import { EuiFlexGroup, EuiFlexItem } from "@elastic/eui";
import InvoicePage from "../../pdf/InvoicePage";
import { PDFViewer } from "@react-pdf/renderer";

function DashboardScreen() {
  const auth = useSelector((state) => state.auth);
  const user = auth.user;

  const viewInvoice = [""];

  return (
    <div className='flex flex-col mx-auto'>
      <EuiFlexGroup
        direction='column'
        justifyContent='center'
        alignItems='center'
        className='w-full'
      >
        <EuiFlexItem>
          <h2 className='text-5xl mt-10'>{user.firstName}'s Dashboard</h2>
        </EuiFlexItem>
        <EuiFlexItem className='mt-20 text-lg'>
          Dashboard Coming Soon!
        </EuiFlexItem>
      </EuiFlexGroup>
      <PDFViewer>
        <InvoicePage user={user} invoice={viewInvoice} />
      </PDFViewer>
    </div>
  );
}

export default DashboardScreen;

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

function InvoicePage({ invoice, user }) {
  const styles = StyleSheet.create({
    page: {
      backgroundColor: "white",
    },
  });
  return (
    <Document>
      <Page size='A4' style={styles.page}>
        <View style={{ display: "flex" }}>
          <View
            style={{
              display: "flex",
              flexDirection: "column",
              width: "50%",
              border: "solid 1px gray",
              padding: 8,
            }}
          >
            <Text>Invoice To:</Text>
            <Text>{invoice.clientName}</Text>
            <Text>{invoice.clientAddrOne}</Text>
            <Text>{invoice.clientCity}</Text>
            <Text>{invoice.clientPostcode}</Text>
          </View>
          <View
            style={{
              display: "flex",
              flexDirection: "column",
              width: "50%",
              marginLeft: 80,
              border: "solid 1px gray",
              padding: 8,
            }}
          >
            <Text>Invoice From:</Text>
            <Text>
              {user.firstName} {user.secondName}
            </Text>
            <Text>{user.addrOne || ""}</Text>
            <Text>{user.city || ""}</Text>
            <Text>{user.postcode || ""}</Text>
          </View>
        </View>
        <View
          style={{
            display: "flex",
            flexDirection: "column",
            marginTop: 32,
            border: "1px solid gray",
            padding: 8,
          }}
        >
          <View style={{ display: "flex", width: "100%" }}>
            <Text style={{ width: "35%", textDecoration: "underline" }}>
              Invoice Number
            </Text>
            <Text style={{ width: "35%", textDecoration: "underline" }}>
              Date Sent
            </Text>
            <Text style={{ width: "35%", textDecoration: "underline" }}>
              Date Due
            </Text>
          </View>
          <View style={{ display: "flex", width: "100%", marginTop: 8 }}>
            <Text style={{ width: "35%", paddingLeft: 48 }}>
              {invoice.invoiceNumber}
            </Text>
            <Text style={{ width: "35%" }}>
              {moment(invoice.sentDate).format("Do MMMM YYYY")}
            </Text>
            <Text style={{ width: "35%" }}>
              {moment(invoice.dueDate).format("Do MMMM YYYY")}
            </Text>
          </View>
        </View>
        <View
          style={{
            display: "flex",
            flexDirection: "column",
            border: "1px solid gray",
            marginTop: 8,
            marginBottom: 8,
            padding: 8,
          }}
        >
          <View style={{ display: "flex", width: "100%", marginBottom: 8 }}>
            <Text style={{ width: "50%", textDecoration: "underline" }}>
              Task Description
            </Text>
            <Text style={{ width: "17%", textDecoration: "underline" }}>
              Hours
            </Text>
            <Text style={{ width: "17%", textDecoration: "underline" }}>
              Rate
            </Text>
            <Text style={{ width: "17%", textDecoration: "underline" }}>
              Price
            </Text>
          </View>
          {invoice.tasks.map((task) => {
            const time = task.hours + task.minutes / 60;
            const price = time * invoice.hourlyRate;
            return (
              <View style={{ display: "flex", width: "100%" }}>
                <Text style={{ width: "50%" }}>{task.taskDescription}</Text>
                <Text style={{ width: "17%" }}>{time.toFixed(2)}</Text>
                <Text style={{ width: "17%" }}>{invoice.hourlyRate}</Text>
                <Text style={{ width: "17%" }}>£{price.toFixed(2)}</Text>
              </View>
            );
          })}
        </View>
        <View style={{ display: "flex", justifyContent: "space-between" }}>
          <View
            style={{
              display: "flex",
              flexDirection: "column",
              border: "1px solid gray",
              padding: 8,
              width: "40%",
            }}
          >
            <View style={{ display: "flex" }}>
              <View style={{ textDecoration: "underline", marginBottom: 8 }}>
                <Text>Payment Details</Text>
              </View>
            </View>
            <View>
              <View>
                <Text>Payment Method:</Text>
              </View>
              <View>
                <Text>{invoice.paymentMethod}</Text>
              </View>
            </View>
            <View
              style={{ display: "flex", flexDirection: "column", marginTop: 8 }}
            >
              <View>
                <Text>Account Number:</Text>
              </View>
              <View>
                <Text>{invoice.accountNumber}</Text>
              </View>
            </View>
            <View
              style={{ display: "flex", flexDirection: "column", marginTop: 8 }}
            >
              <View>
                <Text>Sort Code:</Text>
              </View>
              <View>
                <Text>{invoice.sortCode}</Text>
              </View>
            </View>
          </View>
          <View
            style={{ display: "flex", flexDirection: "column", width: "50%" }}
          >
            <View
              style={{ display: "flex", border: "1px solid gray", padding: 8 }}
            >
              <View style={{ width: "50%" }}>
                <Text>Total:</Text>
              </View>
              <View style={{ width: "50%" }}>
                <Text>£0.00</Text>
              </View>
            </View>
            <View
              style={{ display: "flex", flexDirection: "column", marginTop: 8 }}
            >
              Thank you for your business!
            </View>
          </View>
        </View>
      </Page>
    </Document>
  );
}

export default InvoicePage;

Answer 1

Just a simple solution, I think work in your case. You have to mention height of your <PDFViewer> element like

<PDFViewer style={{ height: "50vh", width: "100%"}}>
    <InvoicePage user={user} invoice={viewInvoice} />
</PDFViewer>

OR

<PDFViewer style={styles.PDFContainer}>
    <InvoicePage user={user} invoice={viewInvoice} />
</PDFViewer>

const styles = StyleSheet.create({
    PDFContainer: {
        width: "100%",
        height: "50vh", //As per your page layout 
    }
}

Answer 2

I know this question is old, but anyway...

It's looks like you need to add <Text> tag to Thank you for your business! at the end of file.