React-PDF does not work anywhere on Next.JS

[jamesdiplomat]

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",

},
body: {
	lineHeight: 1.6,
},

header: {
	marginTop: 4,
	marginBottom: 4,
	fontSize: 16,
	textDecoration: 'underline'
},

text: {
	marginTop: 4,
	marginBottom: 4,
	fontSize: 12
}

});

// Create Document Component

export const PDFDoc = ({header, text}: {header: string, text: string}) => (




{header}


{text}




);

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.

[DhavalBhimani44]

Try converting tsx file to jsx file

[mbpmohsen]

add this section to package.json

"resolutions": { "restructure": "3.0.0" },