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.