react-pdf icon indicating copy to clipboard operation
react-pdf copied to clipboard

Published 20 hours ago • verified publisher icon wojtekmaj

Element type is invalid in PageInternal.render after upgrade to Webpack 4

Open iki opened this issue 5 years ago • 9 comments

Before you start - checklist

  • [x] I followed instructions in documentation written for my React-PDF version
  • [x] I have checked if this bug is not already reported
  • [x] I have checked if an issue is not listed in Known issues

Description After upgrade to webpack 4, when we try to show the PDF, the application resets to blank screen on any browser (see below) and the preserved console log shows an uncaught error Element type is invalid in PageInternal.render. See below for full console log. The same code works ok when built with webpack 3.

Steps to reproduce N/A, the source, where we encounter this issue, is not open.

Expected behavior Displaying PDF using react-pdf should continue to work after upgrade to webpack4.

Environment

  • Browser: Current Chrome dev ( 69.0.3493.3), or Opera dev (56.0.3013.0), or IE11
  • React-PDF version: 4.0.0-beta, 4.0.0-beta.2 with either pdfjs-dist 2.0.489 or experimental 2.0.550

Additional information Linking to the general webpack 4 compatibility issue #179.

And here's the full log:

19:30:01.636 webpack-internal:///../node_modules/fbjs/lib/warning.js:33 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `PageInternal`.
    in PageInternal
    in Page (created by PdfViewer)
    in div (created by Document)
    in Document (created by PdfViewer)
    in div (created by DialogContent)
    in DialogContent (created by WithStyles(DialogContent))
    in WithStyles(DialogContent) (created by PdfViewer)
    in div (created by PdfViewer)
    in div (created by Paper)
    in Paper (created by WithStyles(Paper))
    in WithStyles(Paper) (created by Dialog)
    in Transition (created by Fade)
    in Fade (created by WithTheme(Fade))
    in WithTheme(Fade) (created by Dialog)
    in RootRef (created by Modal)
    in div (created by Modal)
    in Portal (created by Modal)
    in Modal (created by WithStyles(Modal))
    in WithStyles(Modal) (created by Dialog)
    in Dialog (created by WithStyles(Dialog))
    in WithStyles(Dialog) (created by PdfViewer)
    in PdfViewer (created by WithStyles(PdfViewer))
    in WithStyles(PdfViewer) (created by withHandlers(WithStyles(PdfViewer)))
    in withHandlers(WithStyles(PdfViewer)) (created by withState(withHandlers(WithStyles(PdfViewer))))
    in withState(withHandlers(WithStyles(PdfViewer))) (created by withState(withState(withHandlers(WithStyles(PdfViewer)))))
    in withState(withState(withHandlers(WithStyles(PdfViewer)))) (created by withState(withState(withState(withHandlers(WithStyles(PdfViewer))))))
    in withState(withState(withState(withHandlers(WithStyles(PdfViewer))))) (created by withState(withState(withState(withState(withHandlers(WithStyles(PdfViewer)))))))
    in withState(withState(withState(withState(withHandlers(WithStyles(PdfViewer)))))) (created by branch(withState(withState(withState(withState(withHandlers(WithStyles(PdfViewer))))))))
    in branch(withState(withState(withState(withState(withHandlers(WithStyles(PdfViewer))))))) (created by Connect(branch(withState(withState(withState(withState(withHandlers(WithStyles(PdfViewer)))))))))
    in Connect(branch(withState(withState(withState(withState(withHandlers(WithStyles(PdfViewer)))))))) (created by ToolTip)
    in div (created by ToolTip)
    in ToolTip (created by WithStyles(ToolTip))
    in WithStyles(ToolTip) (created by lifecycle(WithStyles(ToolTip)))
    in lifecycle(WithStyles(ToolTip)) (created by Connect(lifecycle(WithStyles(ToolTip))))
    in Connect(lifecycle(WithStyles(ToolTip))) (created by withHandlers(Connect(lifecycle(WithStyles(ToolTip)))))
    in withHandlers(Connect(lifecycle(WithStyles(ToolTip)))) (created by withProps(withHandlers(Connect(lifecycle(WithStyles(ToolTip))))))
    in withProps(withHandlers(Connect(lifecycle(WithStyles(ToolTip))))) (created by withState(withProps(withHandlers(Connect(lifecycle(WithStyles(ToolTip)))))))
    in withState(withProps(withHandlers(Connect(lifecycle(WithStyles(ToolTip)))))) (created by withState(withState(withProps(withHandlers(Connect(lifecycle(WithStyles(ToolTip))))))))
    in withState(withState(withProps(withHandlers(Connect(lifecycle(WithStyles(ToolTip))))))) (created by branch(withState(withState(withProps(withHandlers(Connect(lifecycle(WithStyles(ToolTip)))))))))
    in branch(withState(withState(withProps(withHandlers(Connect(lifecycle(WithStyles(ToolTip)))))))) (created by KpiChart)
    in div (created by KpiChart)
    in div (created by KpiChart)
    in KpiChart (created by WithStyles(KpiChart))
    in WithStyles(KpiChart) (created by lifecycle(WithStyles(KpiChart)))
    in lifecycle(WithStyles(KpiChart)) (created by withPropsOnChange(lifecycle(WithStyles(KpiChart))))
    in withPropsOnChange(lifecycle(WithStyles(KpiChart))) (created by withHandlers(withPropsOnChange(lifecycle(WithStyles(KpiChart)))))
    in withHandlers(withPropsOnChange(lifecycle(WithStyles(KpiChart)))) (created by withState(withHandlers(withPropsOnChange(lifecycle(WithStyles(KpiChart))))))
    in withState(withHandlers(withPropsOnChange(lifecycle(WithStyles(KpiChart))))) (created by withState(withState(withHandlers(withPropsOnChange(lifecycle(WithStyles(KpiChart)))))))
    in withState(withState(withHandlers(withPropsOnChange(lifecycle(WithStyles(KpiChart)))))) (created by withState(withState(withState(withHandlers(withPropsOnChange(lifecycle(WithStyles(KpiChart))))))))
    in withState(withState(withState(withHandlers(withPropsOnChange(lifecycle(WithStyles(KpiChart))))))) (created by withState(withState(withState(withState(withHandlers(withPropsOnChange(lifecycle(WithStyles(KpiChart)))))))))
    in withState(withState(withState(withState(withHandlers(withPropsOnChange(lifecycle(WithStyles(KpiChart)))))))) (created by withState(withState(withState(withState(withState(withHandlers(withPropsOnChange(lifecycle(WithStyles(KpiChart))))))))))
    in withState(withState
printWarning @ webpack-internal:///../node_modules/fbjs/lib/warning.js:33
19:30:01.637 webpack-internal:///../node_modules/fbjs/lib/invariant.js:49 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `PageInternal`.
    at invariant (webpack-internal:///../node_modules/fbjs/lib/invariant.js:42)
    at throwOnInvalidElementType (webpack-internal:///../node_modules/react-dom/cjs/react-dom.development.js:5393)
    at createFiberFromElement (webpack-internal:///../node_modules/react-dom/cjs/react-dom.development.js:5359)
    at createChild (webpack-internal:///../node_modules/react-dom/cjs/react-dom.development.js:7554)
    at reconcileChildrenArray (webpack-internal:///../node_modules/react-dom/cjs/react-dom.development.js:7805)
    at reconcileChildFibers (webpack-internal:///../node_modules/react-dom/cjs/react-dom.development.js:8121)
    at reconcileChildrenAtExpirationTime (webpack-internal:///../node_modules/react-dom/cjs/react-dom.development.js:8240)
    at reconcileChildren (webpack-internal:///../node_modules/react-dom/cjs/react-dom.development.js:8231)
    at updateFragment (webpack-internal:///../node_modules/react-dom/cjs/react-dom.development.js:8268)
    at beginWork (webpack-internal:///../node_modules/react-dom/cjs/react-dom.development.js:9004)
19:30:01.692 webpack-internal:///../node_modules/react-dom/cjs/react-dom.development.js:9643 The above error occurred in one of your React components:
    in div (created by PageInternal)
    in PageInternal
    in Page (created by PdfViewer)
    in div (created by Document)
    in Document (created by PdfViewer)
    in div (created by DialogContent)
    in DialogContent (created by WithStyles(DialogContent))
    in WithStyles(DialogContent) (created by PdfViewer)
    in div (created by PdfViewer)
    in div (created by Paper)
    in Paper (created by WithStyles(Paper))
    in WithStyles(Paper) (created by Dialog)
    in Transition (created by Fade)
    in Fade (created by WithTheme(Fade))
    in WithTheme(Fade) (created by Dialog)
    in RootRef (created by Modal)
    in div (created by Modal)
    in Portal (created by Modal)
    in Modal (created by WithStyles(Modal))
    in WithStyles(Modal) (created by Dialog)
    in Dialog (created by WithStyles(Dialog))
    in WithStyles(Dialog) (created by PdfViewer)
    in PdfViewer (created by WithStyles(PdfViewer))
    in WithStyles(PdfViewer) (created by withHandlers(WithStyles(PdfViewer)))
    in withHandlers(WithStyles(PdfViewer)) (created by withState(withHandlers(WithStyles(PdfViewer))))
    in withState(withHandlers(WithStyles(PdfViewer))) (created by withState(withState(withHandlers(WithStyles(PdfViewer)))))
    in withState(withState(withHandlers(WithStyles(PdfViewer)))) (created by withState(withState(withState(withHandlers(WithStyles(PdfViewer))))))
    in withState(withState(withState(withHandlers(WithStyles(PdfViewer))))) (created by withState(withState(withState(withState(withHandlers(WithStyles(PdfViewer)))))))
    in withState(withState(withState(withState(withHandlers(WithStyles(PdfViewer)))))) (created by branch(withState(withState(withState(withState(withHandlers(WithStyles(PdfViewer))))))))
    in branch(withState(withState(withState(withState(withHandlers(WithStyles(PdfViewer))))))) (created by Connect(branch(withState(withState(withState(withState(withHandlers(WithStyles(PdfViewer)))))))))
    in Connect(branch(withState(withState(withState(withState(withHandlers(WithStyles(PdfViewer)))))))) (created by ToolTip)
    in div (created by ToolTip)
    in ToolTip (created by WithStyles(ToolTip))
    in WithStyles(ToolTip) (created by lifecycle(WithStyles(ToolTip)))
    in lifecycle(WithStyles(ToolTip)) (created by Connect(lifecycle(WithStyles(ToolTip))))
    in Connect(lifecycle(WithStyles(ToolTip))) (created by withHandlers(Connect(lifecycle(WithStyles(ToolTip)))))
    in withHandlers(Connect(lifecycle(WithStyles(ToolTip)))) (created by withProps(withHandlers(Connect(lifecycle(WithStyles(ToolTip))))))
    in withProps(withHandlers(Connect(lifecycle(WithStyles(ToolTip))))) (created by withState(withProps(withHandlers(Connect(lifecycle(WithStyles(ToolTip)))))))
    in withState(withProps(withHandlers(Connect(lifecycle(WithStyles(ToolTip)))))) (created by withState(withState(withProps(withHandlers(Connect(lifecycle(WithStyles(ToolTip))))))))
    in withState(withState(withProps(withHandlers(Connect(lifecycle(WithStyles(ToolTip))))))) (created by branch(withState(withState(withProps(withHandlers(Connect(lifecycle(WithStyles(ToolTip)))))))))
    in branch(withState(withState(withProps(withHandlers(Connect(lifecycle(WithStyles(ToolTip)))))))) (created by KpiChart)
    in div (created by KpiChart)
    in div (created by KpiChart)
    in KpiChart (created by WithStyles(KpiChart))
    in WithStyles(KpiChart) (created by lifecycle(WithStyles(KpiChart)))
    in lifecycle(WithStyles(KpiChart)) (created by withPropsOnChange(lifecycle(WithStyles(KpiChart))))
    in withPropsOnChange(lifecycle(WithStyles(KpiChart))) (created by withHandlers(withPropsOnChange(lifecycle(WithStyles(KpiChart)))))
    in withHandlers(withPropsOnChange(lifecycle(WithStyles(KpiChart)))) (created by withState(withHandlers(withPropsOnChange(lifecycle(WithStyles(KpiChart))))))
    in withState(withHandlers(withPropsOnChange(lifecycle(WithStyles(KpiChart))))) (created by withState(withState(withHandlers(withPropsOnChange(lifecycle(WithStyles(KpiChart)))))))
    in withState(withState(withHandlers(withPropsOnChange(lifecycle(WithStyles(KpiChart)))))) (created by withState(withState(withState(withHandlers(withPropsOnChange(lifecycle(WithStyles(KpiChart))))))))
    in withState(withState(withState(withHandlers(withPropsOnChange(lifecycle(WithStyles(KpiChart))))))) (created by withState(withState(withState(withState(withHandlers(withPropsOnChange(lifecycle(WithStyles(KpiChart)))))))))
    in withState(withState(withState(withState(withHandlers(withPropsOnChange(lifecycle(WithStyles(KpiChart)))))))) (created by withState(withState(withState(withState(withState(withHandlers(withPropsOnChange(lifecycle(WithStyles(KpiChart))))))))))
    in withState(withState(withState(withState(withState(withHandlers(withPropsOnChange(lifecycle(WithStyles(KpiChart))))))))) (created by withState(withState(withState(withState(withState(withState(withHandlers(withPropsOnChange(lifecycle(WithStyles(KpiChart)
logCapturedError @ webpack-internal:///../node_modules/react-dom/cjs/react-dom.development.js:9643
19:30:01.692 webpack-internal:///../node_modules/react-hot-loader/dist/react-hot-loader.development.js:175 Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `PageInternal`.
    at invariant (webpack-internal:///../node_modules/fbjs/lib/invariant.js:42)
    at throwOnInvalidElementType (webpack-internal:///../node_modules/react-dom/cjs/react-dom.development.js:5393)
    at createFiberFromElement (webpack-internal:///../node_modules/react-dom/cjs/react-dom.development.js:5359)
    at createChild (webpack-internal:///../node_modules/react-dom/cjs/react-dom.development.js:7554)
    at reconcileChildrenArray (webpack-internal:///../node_modules/react-dom/cjs/react-dom.development.js:7805)
    at reconcileChildFibers (webpack-internal:///../node_modules/react-dom/cjs/react-dom.development.js:8121)
    at reconcileChildrenAtExpirationTime (webpack-internal:///../node_modules/react-dom/cjs/react-dom.development.js:8240)
    at reconcileChildren (webpack-internal:///../node_modules/react-dom/cjs/react-dom.development.js:8231)
    at updateFragment (webpack-internal:///../node_modules/react-dom/cjs/react-dom.development.js:8268)
    at beginWork (webpack-internal:///../node_modules/react-dom/cjs/react-dom.development.js:9004)
error @ webpack-internal:///../node_modules/react-hot-loader/dist/react-hot-loader.development.js:175
19:30:02.121 webpack-internal:///../node_modules/fbjs/lib/warning.js:33 Warning: Can't call setState (or forceUpdate) on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
    in PageInternal
    in Page (created by PdfViewer)
    in div (created by Document)
    in Document (created by PdfViewer)
    in div (created by DialogContent)
    in DialogContent (created by WithStyles(DialogContent))
    in WithStyles(DialogContent) (created by PdfViewer)
    in div (created by PdfViewer)
    in div (created by Paper)
    in Paper (created by WithStyles(Paper))
    in WithStyles(Paper) (created by Dialog)
    in Transition (created by Fade)
    in Fade (created by WithTheme(Fade))
    in WithTheme(Fade) (created by Dialog)
    in RootRef (created by Modal)
    in div (created by Modal)
    in Portal (created by Modal)
    in Modal (created by WithStyles(Modal))
    in WithStyles(Modal) (created by Dialog)
    in Dialog (created by WithStyles(Dialog))
    in WithStyles(Dialog) (created by PdfViewer)
    in PdfViewer (created by WithStyles(PdfViewer))
    in WithStyles(PdfViewer) (created by withHandlers(WithStyles(PdfViewer)))
    in withHandlers(WithStyles(PdfViewer)) (created by withState(withHandlers(WithStyles(PdfViewer))))
    in withState(withHandlers(WithStyles(PdfViewer))) (created by withState(withState(withHandlers(WithStyles(PdfViewer)))))
    in withState(withState(withHandlers(WithStyles(PdfViewer)))) (created by withState(withState(withState(withHandlers(WithStyles(PdfViewer))))))
    in withState(withState(withState(withHandlers(WithStyles(PdfViewer))))) (created by withState(withState(withState(withState(withHandlers(WithStyles(PdfViewer)))))))
    in withState(withState(withState(withState(withHandlers(WithStyles(PdfViewer)))))) (created by branch(withState(withState(withState(withState(withHandlers(WithStyles(PdfViewer))))))))
    in branch(withState(withState(withState(withState(withHandlers(WithStyles(PdfViewer))))))) (created by Connect(branch(withState(withState(withState(withState(withHandlers(WithStyles(PdfViewer)))))))))
    in Connect(branch(withState(withState(withState(withState(withHandlers(WithStyles(PdfViewer)))))))) (created by ToolTip)
    in div (created by ToolTip)
    in ToolTip (created by WithStyles(ToolTip))
    in WithStyles(ToolTip) (created by lifecycle(WithStyles(ToolTip)))
    in lifecycle(WithStyles(ToolTip)) (created by Connect(lifecycle(WithStyles(ToolTip))))
    in Connect(lifecycle(WithStyles(ToolTip))) (created by withHandlers(Connect(lifecycle(WithStyles(ToolTip)))))
    in withHandlers(Connect(lifecycle(WithStyles(ToolTip)))) (created by withProps(withHandlers(Connect(lifecycle(WithStyles(ToolTip))))))
    in withProps(withHandlers(Connect(lifecycle(WithStyles(ToolTip))))) (created by withState(withProps(withHandlers(Connect(lifecycle(WithStyles(ToolTip)))))))
    in withState(withProps(withHandlers(Connect(lifecycle(WithStyles(ToolTip)))))) (created by withState(withState(withProps(withHandlers(Connect(lifecycle(WithStyles(ToolTip))))))))
    in withState(withState(withProps(withHandlers(Connect(lifecycle(WithStyles(ToolTip))))))) (created by branch(withState(withState(withProps(withHandlers(Connect(lifecycle(WithStyles(ToolTip)))))))))
    in branch(withState(withState(withProps(withHandlers(Connect(lifecycle(WithStyles(ToolTip)))))))) (created by KpiChart)
    in div (created by KpiChart)
    in div (created by KpiChart)
    in KpiChart (created by WithStyles(KpiChart))
    in WithStyles(KpiChart) (created by lifecycle(WithStyles(KpiChart)))
    in lifecycle(WithStyles(KpiChart)) (created by withPropsOnChange(lifecycle(WithStyles(KpiChart))))
    in withPropsOnChange(lifecycle(WithStyles(KpiChart))) (created by withHandlers(withPropsOnChange(lifecycle(WithStyles(KpiChart)))))
    in withHandlers(withPropsOnChange(lifecycle(WithStyles(KpiChart)))) (created by withState(withHandlers(withPropsOnChange(lifecycle(WithStyles(KpiChart))))))
    in withState(withHandlers(withPropsOnChange(lifecycle(WithStyles(KpiChart))))) (created by withState(withState(withHandlers(withPropsOnChange(lifecycle(WithStyles(KpiChart)))))))
    in withState(withState(withHandlers(withPropsOnChange(lifecycle(WithStyles(KpiChart)))))) (created by withState(withState(withState(withHandlers(withPropsOnChange(lifecycle(WithStyles(KpiChart))))))))
    in withState(withState(withState(withHandlers(withPropsOnChange(lifecycle(WithStyles(KpiChart))))))) (created by withState(withState(withState(withState(withHandlers(withPropsOnChange(lifecycle(WithStyles(KpiChart)))))))))
    in withState(withState(withState(withState(withHandlers(withPropsOnChange(lifecycle(WithStyles(KpiChart)))))))) (created by withState(withState(withState(withState(withState(withHandlers(withPropsOnChange(lifecycle(WithStyles(KpiChart))))))))))
    in withState(withState(withState(withState(withState(withHandlers(withPropsOnChange(lifecycle(WithStyles(KpiChart))))
printWarning @ webpack-internal:///../node_modules/fbjs/lib/warning.js:33

iki avatar Jul 25 '18 18:07 iki

Hi, what version of React are you on?

wojtekmaj avatar Jul 26 '18 13:07 wojtekmaj

Hi @wojtekmaj, we use [email protected].

iki avatar Jul 26 '18 13:07 iki

I tried to reproduce it and honestly, I'm not even able to get it working on Webpack 4. We gotta wait for Mozilla to make an official release. Then we'll deprecate Webpack 2 and Webpack 4 should be supported just fine. Keeping this open for now.

wojtekmaj avatar Aug 09 '18 10:08 wojtekmaj

Thanks @wojtekmaj! I'll try to create sample/webpack4 from your sample/webpack and reproduce the issue there. We can test the pdf.js pre/release with it and check if there's anything needed on the react-pdf side.

iki avatar Aug 09 '18 11:08 iki

Hi, I am running into the same issue using webpack 4, [email protected] and react-pdf 5. Any updates or workarounds on this?

drita-shujaku avatar Oct 01 '20 21:10 drita-shujaku

I'm running into similar issue using webpack 5, [email protected], react-pdf 5.7.2. Did I miss sth obvious?

arning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `PageInternal`.
    in PageInternal (created by Context.Consumer)
    in ForwardRef(Page) (created by PdfViewer)
    in div (created by Document)
    in Document (created by PdfViewer)
    in div (created by PdfViewer)
    ...(my app internals)

yeung108 avatar May 17 '22 10:05 yeung108

I'm running into similar issue using webpack 5, [email protected], react-pdf 5.7.2. Did I miss sth obvious?


arning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.



Check the render method of `PageInternal`.

    in PageInternal (created by Context.Consumer)

    in ForwardRef(Page) (created by PdfViewer)

    in div (created by Document)

    in Document (created by PdfViewer)

    in div (created by PdfViewer)

    ...(my app internals)

The weird thing I found is...it works in storybook but not in the real code...but I'm calling the same component.

Anyone encountered the same error could give me some insight on how it's happening...?

yeung108 avatar Jul 20 '22 12:07 yeung108

I've encountered a similar issue to @yeung108. However instead of but got: undefined I get but got: object. I am currently unable to render a PDF using Webpack 5, and react-pdf 5.7.2. I have tried both React 18.2.0 and 17.02, both result in the same error.

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of 'PageInternal'.
    at PageInternal
    at Page
    at div
    at Document
    at div
    at PdfViewer
    ... (my app)

My app is quite simple, I am currently just trying to render a single page of a document:

import React, { FunctionComponent } from 'react';
import { RouteComponentProps } from '@reach/router';
import { Document, Page, pdfjs } from 'react-pdf';

pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.js`;

const PdfViewer: FunctionComponent<RouteComponentProps> = () => {
  const onDocumentLoadError = (error: Error) => {
    console.log(`Error: ${error}`);
  };

  const onDocumentLoadSuccess = ({ numPages }: any) => {
    console.log(`Document loaded: ${numPages}`);
  };

  const onPageLoadError = (error: Error) => {
    console.log(`Page load error: ${error}`);
  };

  return (
    <div>
      <Document
        file="/images/transformers.pdf"
        onLoadSuccess={onDocumentLoadSuccess}
        onLoadError={onDocumentLoadError}
      >
        <Page pageNumber={1} onLoadError={onPageLoadError} />
      </Document>
    </div>
  );
};

export default PdfViewer;

I also checked devtools, and confirmed that I was able to get the static local pdf correctly (attached is the photo of the 200 request) Screen Shot 2022-07-20 at 3 13 25 PM

Does anyone have any advice on how to fix this? I have tried different pdfs, importing react-pdf multiple different ways, setting up the pdf.worker in different ways and nothing has helped. Any help would be greatly appreciated!

JordanLane-Veerum avatar Jul 20 '22 21:07 JordanLane-Veerum

Just want to add that if I comment out the <Page/> component, it works successfully and can load the numPages of the document. So should be sth wrong with the <Page/> component itself. I also tried doing {numPages && <Page pageNumber={currentPage} />} but the same error occurs.

...
  const [numPages, setNumPages] = useState<number | null>(null);
  const [currentPage, setCurrentPage] = useState<number>(1);
  const onDocumentLoadSuccess = (pageNum: number) => {
    window.console.log(pageNum) <-- it can successfully print the number of pages of the document
    setNumPages(pageNum);
  };
  <Document
        file={url}
        onLoadSuccess={(source) => {
          onDocumentLoadSuccess(source.numPages);
        }}
      >
        {numPages && <Page pageNumber={currentPage} />}
      </Document>

So yeah...appreciate if anyone could lend a helping hand here...

yeung108 avatar Jul 21 '22 04:07 yeung108

This issue is stale because it has been open 90 days with no activity. Remove stale label or comment or this issue will be closed in 14 days.

github-actions[bot] avatar Oct 24 '22 00:10 github-actions[bot]

This issue was closed because it has been stalled for 14 days with no activity.

github-actions[bot] avatar Nov 14 '22 00:11 github-actions[bot]