And it does not work at all. In my development server it spits out these errors:
⚠ ./app/clinical-justification/page.tsx
Attempted import error: 'PDFDownloadLink' is not exported from '@react-pdf/renderer' (imported as 'PDFDownloadLink').
Import trace for requested module:
./app/clinical-justification/page.tsx
./components/parts.tsx
Attempted import error: 'Font' is not exported from '@react-pdf/renderer' (imported as 'Font').
Import trace for requested module:
./components/parts.tsx
./app/page.tsx
./components/parts.tsx
Attempted import error: 'StyleSheet' is not exported from '@react-pdf/renderer' (imported as 'StyleSheet').
Import trace for requested module:
./components/parts.tsx
./app/page.tsx
./components/parts.tsx
Attempted import error: 'Document' is not exported from '@react-pdf/renderer' (imported as 'Document').
Import trace for requested module:
./components/parts.tsx
./app/page.tsx
./components/parts.tsx
Attempted import error: 'Page' is not exported from '@react-pdf/renderer' (imported as 'Page').
Import trace for requested module:
./components/parts.tsx
./app/page.tsx
./components/parts.tsx
Attempted import error: 'View' is not exported from '@react-pdf/renderer' (imported as 'View').
Import trace for requested module:
./components/parts.tsx
./app/page.tsx
./components/parts.tsx
Attempted import error: 'View' is not exported from '@react-pdf/renderer' (imported as 'View').
Import trace for requested module:
./components/parts.tsx
./app/page.tsx
./components/parts.tsx
Attempted import error: 'Text' is not exported from '@react-pdf/renderer' (imported as 'Text').
Import trace for requested module:
./components/parts.tsx
./app/page.tsx
./components/parts.tsx
Attempted import error: 'View' is not exported from '@react-pdf/renderer' (imported as 'View').
Import trace for requested module:
./components/parts.tsx
./app/page.tsx
./components/parts.tsx
Attempted import error: 'Text' is not exported from '@react-pdf/renderer' (imported as 'Text').
Import trace for requested module:
./components/parts.tsx
./app/page.tsx
Furthermore another issue happens: whenever I save something, the development window doesn't automatically render correctly, and it crashes with this error below and has to reload everything. Building it DOES NOT work at all as well, because of the build errors.
⨯ TypeError: Cannot redefine property: BlobProvider
at Function.defineProperty ()
at webpack_require (/home/james/Documents/work/insurance_notes/.next/server/webpack-runtime.js:33:43)
at eval (./components/parts.tsx:21:77)
at (ssr)/./components/parts.tsx (/home/james/Documents/work/insurance_notes/.next/server/app/clinical-justification/page.js:556:1)
at webpack_require (/home/james/Documents/work/insurance_notes/.next/server/webpack-runtime.js:33:43)
at eval (./app/clinical-justification/page.tsx:13:75)
at (ssr)/./app/clinical-justification/page.tsx (/home/james/Documents/work/insurance_notes/.next/server/app/clinical-justification/page.js:468:1)
at __webpack_require__ (/home/james/Documents/work/insurance_notes/.next/server/webpack-runtime.js:33:43)
at JSON.parse ()
I have also attempted to use react-pdf on server side, but, still to no avail.
I attempted to import on the client side on parts.tsx (my file). I am using next.js 14.0.2 to build my application.
My parts.tsx file looked like this:
import { Document, Page, Text, View, StyleSheet, Font} from '@react-pdf/renderer'; ... Font.register({ family: 'Merriweather-Regular', src: "/fonts/Merriweather-Regular.ttf" });
// Create styles const styles = StyleSheet.create({ page: { flexDirection: "column", backgroundColor: '#FFFFFF', fontFamily: "Merriweather-Regular", padding: 50, whiteSpace: "pre-wrap",
});
// Create Document Component
export const PDFDoc = ({header, text}: {header: string, text: string}) => (
);
And it does not work at all. In my development server it spits out these errors:
⚠ ./app/clinical-justification/page.tsx Attempted import error: 'PDFDownloadLink' is not exported from '@react-pdf/renderer' (imported as 'PDFDownloadLink').
Import trace for requested module: ./app/clinical-justification/page.tsx
./components/parts.tsx Attempted import error: 'Font' is not exported from '@react-pdf/renderer' (imported as 'Font').
Import trace for requested module: ./components/parts.tsx ./app/page.tsx
./components/parts.tsx Attempted import error: 'StyleSheet' is not exported from '@react-pdf/renderer' (imported as 'StyleSheet').
Import trace for requested module: ./components/parts.tsx ./app/page.tsx
./components/parts.tsx Attempted import error: 'Document' is not exported from '@react-pdf/renderer' (imported as 'Document').
Import trace for requested module: ./components/parts.tsx ./app/page.tsx
./components/parts.tsx Attempted import error: 'Page' is not exported from '@react-pdf/renderer' (imported as 'Page').
Import trace for requested module: ./components/parts.tsx ./app/page.tsx
./components/parts.tsx Attempted import error: 'View' is not exported from '@react-pdf/renderer' (imported as 'View').
Import trace for requested module: ./components/parts.tsx ./app/page.tsx
./components/parts.tsx Attempted import error: 'View' is not exported from '@react-pdf/renderer' (imported as 'View').
Import trace for requested module: ./components/parts.tsx ./app/page.tsx
./components/parts.tsx Attempted import error: 'Text' is not exported from '@react-pdf/renderer' (imported as 'Text').
Import trace for requested module: ./components/parts.tsx ./app/page.tsx
./components/parts.tsx Attempted import error: 'View' is not exported from '@react-pdf/renderer' (imported as 'View').
Import trace for requested module: ./components/parts.tsx ./app/page.tsx
./components/parts.tsx Attempted import error: 'Text' is not exported from '@react-pdf/renderer' (imported as 'Text').
Import trace for requested module: ./components/parts.tsx ./app/page.tsx
Furthermore another issue happens: whenever I save something, the development window doesn't automatically render correctly, and it crashes with this error below and has to reload everything. Building it DOES NOT work at all as well, because of the build errors.
⨯ TypeError: Cannot redefine property: BlobProvider at Function.defineProperty ()
at webpack_require (/home/james/Documents/work/insurance_notes/.next/server/webpack-runtime.js:33:43)
at eval (./components/parts.tsx:21:77)
at (ssr)/./components/parts.tsx (/home/james/Documents/work/insurance_notes/.next/server/app/clinical-justification/page.js:556:1)
at webpack_require (/home/james/Documents/work/insurance_notes/.next/server/webpack-runtime.js:33:43)
at eval (./app/clinical-justification/page.tsx:13:75)
at (ssr)/./app/clinical-justification/page.tsx (/home/james/Documents/work/insurance_notes/.next/server/app/clinical-justification/page.js:468:1)
at __webpack_require__ (/home/james/Documents/work/insurance_notes/.next/server/webpack-runtime.js:33:43)
at JSON.parse ()
I have also attempted to use react-pdf on server side, but, still to no avail.