0

Trying to render a pdf using react-pdf and I swear I've done every configuration of their docs and nothings working. I keep getting

ReferenceError: $RefreshReg$ is not defined

Proof of concept component. Yes, the options aren't be used in this snippet but I've tried using it. I tried bringing in the cmaps directly into this components and referencing it there. I tried the copy webpack plugin and doing exactly as the documentation suggest. Nothing has worked. It's always this same error. Hoping I've just missed some minor detail.

/* eslint-disable @typescript-eslint/no-var-requires */
/* eslint-disable @typescript-eslint/no-unsafe-assignment */
/* eslint-disable @typescript-eslint/no-empty-function */
/* eslint-disable @typescript-eslint/ban-ts-comment */
import { Container, Paper } from '@material-ui/core';
import React, { useState } from 'react';
import { Document, Page } from 'react-pdf/dist/esm/entry.webpack';
import { pdfjs } from 'react-pdf';
import 'react-pdf/dist/esm/Page/AnnotationLayer.css';
pdfjs.GlobalWorkerOptions.workerSrc = 'pdf.worker.min.js';

const options = {
    cMapUrl: `//cdn.jsdelivr.net/npm/pdfjs-dist@${pdfjs.version}/cmaps/`,
    cMapPacked: false
};


export default function TVRPreview() {
    const [numPages, setNumPages] = useState(null);
    const [pageNumber, setPageNumber] = useState(1);

    function onDocumentLoadSuccess({ numPages }: any) {
        setNumPages(numPages);
    }

    return (
        <Container>
            <Paper>TVR Preview</Paper>

            <Paper elevation={6}>
                <Document file="./PDFTestTVR.pdf" onLoadSuccess={onDocumentLoadSuccess}>
                    <Page pageNumber={pageNumber}></Page>
                </Document>
            </Paper>
        </Container>
    );
}

Project Details

Create React App using react-app-rewired

"start": "react-app-rewired start",

cphilpot
  • 1,155
  • 3
  • 17
  • 39

2 Answers2

0

Just to be sure is everything working as well, make the following steps:

Change the const options to:

const options = {
    cMapUrl: 'cmaps/',
    cMapPacked: true,
};

and here:

<Document file="./PDFTestTVR.pdf" onLoadSuccess={onDocumentLoadSuccess}>

Change this file reference to any pdf located someplace on the internet.

João Lucas dos Santos
  • 1
  • 1
0

Two problems are possible here..

  1. Make sure your local pdf file is located in public folder.
  2. Use pdfjs.version like this instead of passing in options.
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;

Documentation: react-pdf

Ashish Baravaliya
  • 71
  • 5