I've been having a problem with react-pdf in my next js, i've been following multiple tutorial and it seems like still have an error.

I get this error

  ⨯ Instead change the require of react-pdf.js in C:\Users\TCET
 ADMIN\Desktop\next\.next\server\app\(client)\page.js to a dynamic
 import() which is available in all CommonJS modules.
     at @react-pdf/renderer (C:\Users\TCET ADMIN\Desktop\next\.next\server\app\(client)\page.js:110:18)
     at __webpack_require__ (C:\Users\TCET ADMIN\Desktop\next\.next\server\webpack-runtime.js:33:43)
     at eval (_components/CreateAppointmentPdf.tsx:7:77)
     at (ssr)/./app/(client)/_components/CreateAppointmentPdf.tsx (C:\Users\TCET
 ADMIN\Desktop\next\.next\server\app\(client)\page.js:419:1)
     at __webpack_require__ (C:\Users\TCET ADMIN\Desktop\next\.next\server\webpack-runtime.js:33:43)
     at eval (_components/downloadbutton.tsx:10:79)
     at (ssr)/./app/(client)/_components/downloadbutton.tsx (C:\Users\TCET
 ADMIN\Desktop\next\.next\server\app\(client)\page.js:463:1)
     at __webpack_require__ (C:\Users\TCET ADMIN\Desktop\next\.next\server\webpack-runtime.js:33:43)
     at eval (_components/create-schedule-dialog.tsx:38:74)
     at (ssr)/./app/(client)/_components/create-schedule-dialog.tsx (C:\Users\TCET
 ADMIN\Desktop\next\.next\server\app\(client)\page.js:452:1)
     at __webpack_require__ (C:\Users\TCET ADMIN\Desktop\next\.next\server\webpack-runtime.js:33:43)
     at eval (_components/left-calendar.tsx:10:81)
     at (ssr)/./app/(client)/_components/left-calendar.tsx (C:\Users\TCET
 ADMIN\Desktop\next\.next\server\app\(client)\page.js:496:1)
     at __webpack_require__ (C:\Users\TCET ADMIN\Desktop\next\.next\server\webpack-runtime.js:33:43)
     at eval (page.tsx:9:83)
     at (ssr)/./app/(client)/page.tsx (C:\Users\TCET ADMIN\Desktop\next\.next\server\app\(client)\page.js:540:1)
     at Object.__webpack_require__ [as require] (C:\Users\TCET ADMIN\Desktop\next\.next\server\webpack-runtime.js:33:43)
     at JSON.parse () digest: "2904845551"

I tried multiple tutorial, and I tried it to make it like this. I created a custom components and I just pass on different props on it.

MainComponent.tsx

DownloadButton.tsx

'use client'
import React from 'react'
import CreateDocumentPDF from './CreateAppointmentPdf'
import dynamic from 'next/dynamic'

const DownloadButton = ({ form, onClick, disabledButton, isPending }: any) => {
    const [isClient, setIsClient] = useState(false)

    const PDFDownloadLink = dynamic(
        () => import("@react-pdf/renderer").then((mod) => mod.PDFDownloadLink),
        {
          ssr: false,
          loading: () => 
Loading...
,
        }
      );

    useEffect(() => {
        setIsClient(true)
    }, [])

    return (
        
            }
        >
            
                    
            
        
    )
}

export default DownloadButton

And then this my CreateAppointmendPDF.tsx. The problem here is when I use the feature coming from @react-pdf/renderer. I get the error.

import { Document, Font, Page, Text, View } from '@react-pdf/renderer'

const CreateDocumentPDF = ({
    form
}: any) => {
    return (
        

        
    )
}

export default CreateDocumentPDF