pdfslick icon indicating copy to clipboard operation
pdfslick copied to clipboard

Update version 2.3.0 -> 3.0.0 null is not a constructor

Open davidgvf opened this issue 7 months ago • 2 comments

My component: `

interface SharedPDFViewerProps {
    pdfUrl: string;
    customFileName?: string;
    onDownloadClick?: () => void;
}

const SharedPDFViewer: React.FC<SharedPDFViewerProps> = ({
    pdfUrl,
    customFileName = 'document.pdf',
    onDownloadClick
}) => {
    const { viewerRef, usePDFSlickStore, PDFSlickViewer } = usePDFSlick(pdfUrl, {
        singlePageViewer: true,
        filename: customFileName,
        scaleValue: 'page-fit'
    });
const pdfSlick = usePDFSlickStore(s => s.pdfSlick);
const scale = usePDFSlickStore(s => s.scale);

return (
    <div className='flex flex-1 flex-col inset-0 h-full bg-slate-200/40 pdfSlick items-center'>
        <div className='flex-1 relative w-full'>
            <PDFSlickViewer {...{ viewerRef, usePDFSlickStore }} />
        </div>

        <div className={'flex flex-row p-4'}>
            <button
                disabled={!pdfSlick || scale <= 0.25}
                onClick={() => pdfSlick?.viewer?.decreaseScale()}
                type='button'
                className='relative inline-flex items-center px-2 py-2 text-slate-500 ring-0 ring-inset ring-slate-700 hover:bg-slate-50 enabled:hover:text-slate-900 transition-all focus:z-10 pointer-events-auto disabled:opacity-70'
            >
                <span className='sr-only'>Zoom Out</span>
                <svg
                    xmlns='http://www.w3.org/2000/svg'
                    viewBox='0 0 24 24'
                    width='24px'
                    height='24px'
                >
                    <path
                        fill='currentColor'
                        d='M15.5 14h-.79l-.28-.27A6.47 6.47 0 0 0 16 9.5A6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5S14 7.01 14 9.5S11.99 14 9.5 14M7 9h5v1H7z'
                    ></path>
                </svg>
            </button>
            <button
                disabled={!pdfSlick || scale >= 5}
                onClick={() => pdfSlick?.viewer?.increaseScale()}
                type='button'
                className='relative inline-flex items-center px-2 py-2 text-slate-500 ring-0 ring-inset ring-slate-700 hover:bg-slate-50 enabled:hover:text-slate-900 transition-all focus:z-10 pointer-events-auto disabled:opacity-70'
            >
                <span className='sr-only'>Zoom In</span>
                <svg
                    xmlns='http://www.w3.org/2000/svg'
                    viewBox='0 0 24 24'
                    width='24px'
                    height='24px'
                >
                    <path
                        fill='currentColor'
                        d='M15.5 14h-.79l-.28-.27A6.47 6.47 0 0 0 16 9.5A6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5S14 7.01 14 9.5S11.99 14 9.5 14'
                    ></path>
                    <path fill='currentColor' d='M12 10h-2v2H9v-2H7V9h2V7h1v2h2z'></path>
                </svg>
            </button>
            {!!onDownloadClick && (
                <div>
                    <button
                        onClick={onDownloadClick}
                        type='button'
                        className='relative inline-flex items-center px-2 py-2 text-slate-500 ring-0 ring-inset ring-slate-700 hover:bg-slate-50 enabled:hover:text-slate-900 transition-all focus:z-10 pointer-events-auto disabled:opacity-70'
                    >
                        <span className='sr-only'>Download</span>
                        <DocumentDownload />
                    </button>
                </div>
            )}
        </div>
    </div>
);

};

export default SharedPDFViewer; `

Image

davidgvf avatar Sep 12 '25 07:09 davidgvf

PDFSlick v3 uses latest pdf.js version, so make sure you have it installed. Try removing your projects node_modules and package-lock.json and then running npm install, should ensure proper versions.

van100j avatar Sep 14 '25 09:09 van100j

in localhost is fine, but when deploy on vercel, is a crash @van100j

davidgvf avatar Sep 17 '25 09:09 davidgvf