I can't render PDF in react-pdf library

75 views Asked by At

i have a problem that I cannot solve;

In my Next.JS project, I get an error when I want to render my component named <Document/> in <PDFViewer/>.

Currently, I cannot perform dynamic operations on PDF.

After the reload process, the error is displayed on the node-console.

Note: I am currently doing Client Side Rendering of all components in my Next.JS project.

  • OS: MacOS
  • Browser: Safari
  • React-pdf version: 3.3.5

Preview.tsx;

"use client";

import { PDFViewer } from "@react-pdf/renderer";
import { ReactElement } from "react";
import Document from "@/components/Document/Document";

export default function Preview(): ReactElement {
  return (
    <div className="h-full w-full">
      <PDFViewer className="h-full w-full" showToolbar={false}>
        <Document />
      </PDFViewer>
    </div>
  );
}

Document.tsx;

"use client";

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

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

  return (
    <PDF>
      <Page size="A4" style={styles.page}>
        <View style={styles.section}>
          <Text>Section #1</Text>
        </View>
        <View style={styles.section}>
          <Text>Section #2</Text>
        </View>
      </Page>
    </PDF>
  );
}

Bash;


✓ Compiled in 299ms (1272 modules)
 ⚠ Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/messages/fast-refresh-reload
 ⨯ node_modules/@react-pdf/renderer/lib/react-pdf.js (4446:8) @ throwEnvironmentError
 ⨯ Internal error: Error: PDFViewer is a web specific API. You're either using this component on Node, or your bundler is not loading react-pdf from the appropriate web build.
    at throwEnvironmentError (./node_modules/@react-pdf/renderer/lib/react-pdf.js:4386:11)
    at PDFViewer (./node_modules/@react-pdf/renderer/lib/react-pdf.js:4392:5)

I expecting rendered pdf.

0

There are 0 answers