Closing page causes error in PdfPages.componentWillUnmount

[outlawpractice]

I get this error when I navigate away from a page with a ReactPDF component with a PDF loaded:

Uncaught error in http://localhost:3000/static/js/10.chunk.js:61631:26 - Uncaught TypeError: Cannot read property 'pdf' of null TypeError: Cannot read property 'pdf' of null
    at PdfPages.componentWillUnmount (index.js:143)

My code is pretty basic:

<ReactPDF url={doc.uri} showProgressBar showToolbox={this.props.isExpanded} />

The PDF is being shown inside of a well-nested div (think portlet).

[outlawpractice]

To see this in action, update PdfViewer/index.js's render method as follows (this will set up a simple switch button to switch between an empty div and the PDF viewer):

render() {
    if(this.state.showNothing) return <div>Show Nothing <button onClick={() => this.setState({showNothing: false})}>back</button></div>;
    const {
      pdf,
      progress,
      scale,
      currentPage,
      showSearchBar,
      showThumbSidebar
    } = this.state;

    const {
      url,
      showProgressBar,
      showToolbox
    } = this.props;

    return (
      <div id="viewer-container">
        {showProgressBar && <PDFProgressBar progress={progress} />}
        <button onClick={() => this.setState({showNothing: true})}>show nothing</button>
        <div id="viewer">

          {/* PDF SearchBar */}
          {showSearchBar &&
            <PDFSearchBar
              pdfFindController={this._pdfFindController}
              hideSearchBar={this.hideSearchBar}
            />
          }

          {/* PDFThumbBar */}
          <PDFThumbBar
            pdf={pdf}
            currentPage={currentPage}
            setCurrentPage={this.scrollTo}
            showThumbSidebar={showThumbSidebar}
          />

          {/* PDF Content */}
          <div className={`pdfViewer ${!showThumbSidebar ? 'full' : ''}`}>
            {/* PDF Toolbox */}
            {showToolbox &&
              <PDFToolbox
                pdf={pdf}
                currentPage={currentPage}
                setCurrentPage={this.setCurrentPage}
                goToPage={this.goToPage}
                showThumbSidebar={showThumbSidebar}
                toggleThumbnail={this.toggleThumbnail}
                onZoomIn={this.onZoomIn}
                onZoomOut={this.onZoomOut}
                showSearchBar={this.showSearchBar}
                onChangePage={this.onChangePage}
              />
            }

            {/* PDF Pages */}
            <div id="pdf-pages">
              {url &&
                <PDFPages
                  url={url}
                  scale={scale}
                  setPdf={this.setPdf}
                  setPdfViewer={this.setPdfViewer}
                  setFindController={this.setFindController}
                  setCurrentPage={this.setCurrentPage}
                  updateProgressBar={this.updateProgressBar}
                />
              }
            </div>
          </div>
        </div>
      </div>
    );
  }

[trinhngocdieu]

hi @outlawpractice , Thank you for reporting the issue, I checked and fixed it.

Could you please help me to update the latest version and check again?

[outlawpractice]

This fixes the error messages, but the pdf's resources are not being released now. By switching between the code above and an empty element a few times, the memory usage goes way up, and stays up, even after a forced garbage collection.