5

I am trying to implement pdf viewer using this react-pdf-viewer.

But, it keeps throwing this error:

/node_modules/pdfjs-dist/build/pdf.js: Unexpected character '#' (1413:9)

1411 | 1412 | class PDFDocumentLoadingTask {

1413 | static #docId = 0; | ^

This is the code that I added:

import React, { useState } from "react";
import ReactDOM from "react-dom";
import { Viewer } from "@react-pdf-viewer/core";

import "@react-pdf-viewer/core/lib/styles/index.css";

const ModalExample = ({ fileUrl }) => {
  const [shown, setShown] = useState(false);

  const modalBody = () => (
    <div
      style={{
        backgroundColor: "#fff",
        flexDirection: "column",
        overflow: "hidden",

        /* Fixed position */
        left: 0,
        position: "fixed",
        top: 0,

        /* Take full size */
        height: "100%",
        width: "100%",

        /* Displayed on top of other elements */
        zIndex: 9999,
      }}
    >
      <div
        style={{
          alignItems: "center",
          backgroundColor: "#000",
          color: "#fff",
          display: "flex",
          padding: ".5rem",
        }}
      >
        <div style={{ marginRight: "auto" }}>sample-file-name.pdf</div>
        <button
          style={{
            backgroundColor: "#357edd",
            border: "none",
            borderRadius: "4px",
            color: "#ffffff",
            cursor: "pointer",
            padding: "8px",
          }}
          onClick={() => setShown(false)}
        >
          Close
        </button>
      </div>
      <div
        style={{
          flexGrow: 1,
          overflow: "auto",
        }}
      >
        <Viewer
          fileUrl={
            "https://lodeep-storage-3.s3.amazonaws.com/ressources/60e5892d1e8b3c2c24c5463c1663835449323.pdf"
          }
        />
      </div>
    </div>
  );

  return (
    <>
      <button
        style={{
          backgroundColor: "#00449e",
          border: "none",
          borderRadius: ".25rem",
          color: "#fff",
          cursor: "pointer",
          padding: ".5rem",
        }}
        onClick={() => setShown(true)}
      >
        Open modal
      </button>
      {shown && ReactDOM.createPortal(modalBody(), document.body)}
    </>
  );
};

export default ModalExample;

These are the relevant dependencies:

"@react-pdf-viewer/core": "3.7.0", "react": "16.8.6",

Any idea what's going on ?

AG_HIHI
  • 1,705
  • 5
  • 27
  • 69

0 Answers0