Unhandled Rejection (TypeError): _nbind.externalList[num].dereference is not a function

Question

I want to create a report with react-pdf. I get this error when I use Image. There is no error when I remove the image. How do I add an Image. Thank you for your help.

import React from "react";
import {styles} from "../styles";
import {Text, View,Image} from "@react-pdf/renderer";

export const HeaderBorder = () => (
    <View style={{flexDirection: "row",border: "2 solid black",padding:"5px"}}>
        <View
            style={{
                width: "40%"
            }}
        >
            <Image
                style={{
                    width: "100%",
                    height:"50px",
                    marginHorizontal: 0,
                    marginVertical: 0,

                }}
                src="./logo512"
            />
        </View>
        <View style={{width: "60%"}}>
            <Text>Informations</Text>
        </View>
    </View>
)

Answer 1

This error happens when React re-rendering is triggered while PDF rendering was in progress.

Maybe you start rendering PDF immediately after the page is shown, but you are fetching some data (or doing other state manipulation) which triggers React re-rendering of the page which in turn triggers new PDF rendering while the previous was not finished.

Make sure you are triggering PDF rendering only once all data is prepared and when no React re-rendering will happen.