Image is not rendering and I cannot use custom hook

[gokhangunduz]

Hello everyone, I am opening this issue because I could not find solutions to the 2 problems I experienced. This is the second issue I have created for this repository, and unfortunately, I am completely unlucky. I apologize for that. My problems are as follows:

Problem 1

I cannot use a custom hook in the function where the <Document/> component is located. If I try to use it, I encounter the following error: TypeError: Right side of assignment cannot be destructured.

Note: There is no problem with the provider or object. When you see the code, it is stable when I send it as props to the Document element, but there is an issue when I use the same hook in the Document. So, if I were having a provider problem, I would have to experience it in the parent component of the <Document/>.

Problem 2

My image elements are not rendering. When I attempt to render an image, I provide both base64, blob, and a direct path, but I cannot render in all three paths. When I attempt to render it, I notice that it takes up a certain area in the PDF space, but it does not render. I will leave the images below where I set the debug value to true.

Note: On the left, I render the base64 value of the same object with the <img /> element.

Preview.tsx

"use client";

import { ReactElement } from "react";
import PDF from "@/components/PDF/PDF";
import dynamic from "next/dynamic";
import useApp from "@/hooks/useApp";

export default function Preview(): ReactElement {
  const PDFViewer = dynamic(
    () => import("@react-pdf/renderer").then((mod) => mod.PDFViewer),
    {
      ssr: false,
      loading: () => <p>Loading...</p>,
    }
  );

  const { questions } = useApp();

  return (
    <div className="h-full w-full">
      <PDFViewer className="h-full w-full" showToolbar={false}>
        <PDF questions={questions} />
      </PDFViewer>
    </div>
  );
}

PDF.tsx;

/* eslint-disable jsx-a11y/alt-text */
"use client";

import React, { ReactElement } from "react";
import {
  Page,
  Text,
  View,
  StyleSheet,
  Document,
  Image,
} from "@react-pdf/renderer";
import { IQuestion } from "@/interfaces/app.interface";

export default function PDF({
  questions,
}: {
  questions: IQuestion[];
}): ReactElement {
  const styles = StyleSheet.create({
    page: {
      flexDirection: "row",
      backgroundColor: "#FFF",
    },
    section: {
      margin: 10,
      padding: 10,
      flexGrow: 1,
    },
  });

  return (
    <Document>
      <Page size="A4" style={styles.page}>
        <View style={styles.section}>
          {questions.map((question, index) => {
            return (
              <Image
                key={index}
                src={question.base64}
                source={question.base64}
                debug
              />
            );
          })}
          <Text>Section #1</Text>
        </View>
        <View style={styles.section}>
          <Text>Section #2</Text>
        </View>
      </Page>
    </Document>
  );
}

Render Image element with debug;

Render Image element without debug;

[gokhangunduz]

Do you have any ideas? @diegomura @wojtekmaj :(

[wojtekmaj]

Regarding issue 1 - please provide an error stack, and ensure it's not minified.

In general - ensure you're running Next.js 14.1.1 or newer. Otherwise, refer to documentation on how to fix compatibility.

[gokhangunduz]

Hello everyone, I still haven't solved the hook problem, but I have solved the issue of why the images cannot be rendered. While JPEG cannot be rendered in images converted to Base64, PNG can be rendered in Base64. For now, I will convert every uploaded image to PNG format until I figure out the exact reason.

If there is an update on Hook, I will let you know, but I have not found a solution for now.