Argument of type '{ canvasContext: CanvasRenderingContext2D | null; viewport: PageViewport; }' is not assignable to parameter of type 'RenderParameters'.
Types of property 'canvasContext' are incompatible.
Type 'CanvasRenderingContext2D | null' is not assignable to type 'CanvasRenderingContext2D'.
Type 'null' is not assignable to type 'CanvasRenderingContext2D'.ts(2345)
import { IconFolderPlus, IconMistOff, IconPlus, IconFile } from '@tabler/icons-react'; import { ReactNode, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { IconArrowBarLeft, IconArrowBarRight } from '@tabler/icons-react';
import { CloseSidebarButton, OpenSidebarButton, } from './components/OpenCloseButton';
interface Reference { id: string; title: string; description: string; }
interface Props {
isOpen: boolean;
side: 'left' | 'right';
items: T[];
toggleOpen: () => void;
}
const ReferenceSidebar = <T,>({ isOpen, side, items, toggleOpen, }: Props) => {
const { t } = useTranslation('promptbar');
const [hoveredItemId, setHoveredItemId] = useState<string | null>(null);
const allowDrop = (e: any) => { e.preventDefault(); };
const highlightDrop = (e: any) => { e.target.style.background = '#343541'; };
const removeHighlight = (e: any) => { e.target.style.background = 'none'; };
const itemsample = [ {url:'https://caramlops-saas-0.westus.cloudapp.azure.com/file/test/index01/実用発電用原子炉に係る新規制基準の考え方について.pdf',id:'1',title:'実績発電原子炉に係る新規制基準の考え方について.pdf(21)',description:'…見直しを行うために「発電用軽水型原子炉の新規制基準に関する検討チーム」(以下「検討チーム」という。)を組織し、発電用軽水型原子炉の新規制基準策定のための検討を開始した。検討チーム…'}, ]
const titleStyle = { display: 'flex', alignItems: 'center', marginBottom: '30px', fontSize:'18px' } const headerStyle = { display: 'flex', justiftContent: 'space-between', alignItems:'center', fontSize: '15px', marginBottom: '15px', width: '100%', } const titleIcon = { display: 'flex', marginRight: '8px', } const listItemStyle = (isHovered: boolean) => ({ marginBottom: '10px', border: '1px solid white', padding: '20px', borderRadius: '5px', backgroundColor: isHovered ? '#0056b3' : '#343541', // Change background color on hover transition: 'background-color 0.3s', maxWidth: '350px', }); const listTitleStyle = { marginBottom: '10px', } return isOpen ? (
) : (
); };
export default ReferenceSidebar;
${item.url}${getPageNumberFromTitle(item.title)}
Binding element 'fileUrl' implicitly has an 'any' type.
Cannot find module 'react-pdf/renderer' or its corresponding type declarations
(base) jovyan@codeserver-dev-0:~/chatbot-ui$ npm install @react-pdf/renderer
up to date, audited 774 packages in 6s
244 packages are looking for funding run
npm fund
for details9 vulnerabilities (5 moderate, 2 high, 2 critical)
To address issues that do not require attention, run: npm audit fix
To address all issues (including breaking changes), run: npm audit fix --force
Run
npm audit
for details.import { Document, Page } from '@react-pdf/renderer'; import { pdfjs } from '@pdfjs-dist'; import 'react-pdf/dist/esm/Page/AnnotationLayer.css';
interface PDFPreviewProps{ fileUrl:string }
// 设置PDF.js的worker路径 pdfjs.GlobalWorkerOptions.workerSrc =
//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js
;// 使用刚定义的接口作为组件Props的类型 const PDFPreview: React.FC = ({ fileUrl }) => {
return (
); };
export default PDFPreview; Binding element 'fileUrl' implicitly has an 'any' type.
npm install @react-pdf-viewer/core @react-pdf-viewer/default-layout pdfjs-dist
(base) jovyan@codeserver-dev-0:~/chatbot-ui$ npm install @react-pdf-viewer/core @react-pdf-viewer/default-layout pdfjs-dist npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: ai-chatbot-starter@0.1.0 npm ERR! Found: pdfjs-dist@4.0.379 npm ERR! node_modules/pdfjs-dist npm ERR! pdfjs-dist@"^4.0.379" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer pdfjs-dist@"^2.16.105 || ^3.0.279" from @react-pdf-viewer/core@3.12.0 npm ERR! node_modules/@react-pdf-viewer/core npm ERR! @react-pdf-viewer/core@"*" from the root project npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force or --legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution. npm ERR! npm ERR! npm ERR! For a full report see: npm ERR! /home/jovyan/.npm/_logs/2024-03-18T09_03_02_600Z-eresolve-report.txt
npm ERR! A complete log of this run can be found in: /home/jovyan/.npm/_logs/2024-03-18T09_03_02_600Z-debug-0.log
(base) jovyan@codeserver-dev-0:~/chatbot-ui$ npm uninstall react-pdf-viewer/default-layout npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve npm ERR! npm ERR! While resolving: @react-pdf-viewer/core@3.12.0 npm ERR! Found: pdfjs-dist@4.0.379 npm ERR! node_modules/pdfjs-dist npm ERR! pdfjs-dist@"^4.0.379" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer pdfjs-dist@"^2.16.105 || ^3.0.279" from @react-pdf-viewer/core@3.12.0 npm ERR! node_modules/@react-pdf-viewer/core npm ERR! @react-pdf-viewer/core@"3.12.0" from @react-pdf-viewer/attachment@3.12.0 npm ERR! node_modules/@react-pdf-viewer/attachment npm ERR! @react-pdf-viewer/attachment@"3.12.0" from @react-pdf-viewer/default-layout@3.12.0 npm ERR! node_modules/@react-pdf-viewer/default-layout npm ERR! @react-pdf-viewer/default-layout@"^3.12.0" from the root project npm ERR! @react-pdf-viewer/core@"3.12.0" from @react-pdf-viewer/bookmark@3.12.0 npm ERR! node_modules/@react-pdf-viewer/bookmark npm ERR! @react-pdf-viewer/bookmark@"3.12.0" from @react-pdf-viewer/default-layout@3.12.0 npm ERR! node_modules/@react-pdf-viewer/default-layout npm ERR! @react-pdf-viewer/default-layout@"^3.12.0" from the root project npm ERR! 16 more (@react-pdf-viewer/default-layout, ...) npm ERR! npm ERR! Conflicting peer dependency: pdfjs-dist@3.11.174 npm ERR! node_modules/pdfjs-dist npm ERR! peer pdfjs-dist@"^2.16.105 || ^3.0.279" from @react-pdf-viewer/core@3.12.0 npm ERR! node_modules/@react-pdf-viewer/core npm ERR! @react-pdf-viewer/core@"3.12.0" from @react-pdf-viewer/attachment@3.12.0 npm ERR! node_modules/@react-pdf-viewer/attachment npm ERR! @react-pdf-viewer/attachment@"3.12.0" from @react-pdf-viewer/default-layout@3.12.0 npm ERR! node_modules/@react-pdf-viewer/default-layout npm ERR! @react-pdf-viewer/default-layout@"^3.12.0" from the root project npm ERR! @react-pdf-viewer/core@"3.12.0" from @react-pdf-viewer/bookmark@3.12.0 npm ERR! node_modules/@react-pdf-viewer/bookmark npm ERR! @react-pdf-viewer/bookmark@"3.12.0" from @react-pdf-viewer/default-layout@3.12.0 npm ERR! node_modules/@react-pdf-viewer/default-layout npm ERR! @react-pdf-viewer/default-layout@"^3.12.0" from the root project npm ERR! 16 more (@react-pdf-viewer/default-layout, ...) npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force or --legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution. npm ERR! npm ERR! npm ERR! For a full report see: npm ERR! /home/jovyan/.npm/_logs/2024-03-18T09_08_35_938Z-eresolve-report.txt
npm ERR! A complete log of this run can be found in: /home/jovyan/.npm/_logs/2024-03-18T09_08_35_938Z-debug-0.log
Argument of type '{ canvasContext: CanvasRenderingContext2D | null; viewport: PageViewport; }' is not assignable to parameter of type 'RenderParameters'. Types of property 'canvasContext' are incompatible. Type 'CanvasRenderingContext2D | null' is not assignable to type 'CanvasRenderingContext2D'. Type 'null' is not assignable to type 'CanvasRenderingContext2D'.ts(2345)