I have intentionally (to minimize any errors at first) only copied the demo for react-pdf-js, added page and pages in the state to resolve an error, added the closing ); at the end of the render/return to resolve another error, and edited the ponent name. Still, I am getting the error below and am unsure of what it means. It points to the first line of viewingPDF (which is my html extension myapp.firebaseapp/viewingPDF) so it isn't directly pointing to anything wrong in my ponent and I'm unsure how to fix it.

Error:

Uncaught (in promise) 
e
message: "Invalid PDF structure"
name : "InvalidPDFException"
__proto__ : Error at .9108db74.js:34:3985 at Object.<anonymous> (.9108db74.js:34:4013) at Object.<anonymous> (.9108db74.js:34:12954) at t (.9108db74.js:33:27623) at Object.<anonymous> (.9108db74.js:56:12712) at t (.9108db74.js:33:27623) at re (.9108db74.js:33:28006) at .9108db74.js:33:28016 at n.(anonymous function).i (.9108db74.js:33:27496) at Object.<anonymous> (.9108db74.js:33:27500)
stack: "Error↵    at .9108db74.js:34:3985↵    at Object.<anonymous> (.9108db74.js:34:4013)↵    at Object.<anonymous> (.9108db74.js:34:12954)↵    at t (.9108db74.js:33:27623)↵    at Object.<anonymous> (.9108db74.js:56:12712)↵    at t (.9108db74.js:33:27623)↵    at re (.9108db74.js:33:28006)↵    at .9108db74.js:33:28016↵    at n.(anonymous function).i (.9108db74.js:33:27496)↵    at Object.<anonymous> (.9108db74.js:33:27500)"
__proto__: Object
constructor: Error()
message: ""
name: "Error"
toString: toString()
__proto__: Object
__defineGetter__: __defineGetter__()
__defineSetter__: __defineSetter__()
__lookupGetter__: __lookupGetter__()
__lookupSetter__: __lookupSetter__()
constructor: Object()
hasOwnProperty: hasOwnProperty()
isPrototypeOf: isPrototypeOf()
propertyIsEnumerable: propertyIsEnumerable()
toLocaleString: toLocaleString()
toString: toString()
valueOf: valueOf()
get __proto__: __proto__()
set __proto__: __proto__()

This is my ponent implementation (kept close to the demo above):

import React from 'react';
import PDF from 'react-pdf-js';

class ViewPDF extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      page: 0,
      pages: 3
    }
    this.onDocumentComplete = this.onDocumentComplete.bind(this);
    this.onPageComplete = this.onPageComplete.bind(this);
    this.handlePrevious = this.handlePrevious.bind(this);
    this.handleNext = this.handleNext.bind(this);
  }

  onDocumentComplete(pages) {
    this.setState({ page: 1, pages });
  }

  onPageComplete(page) {
    this.setState({ page });
  }

  handlePrevious() {
    this.setState({ page: this.state.page - 1 });
  }

  handleNext() {
    this.setState({ page: this.state.page + 1 });
  }

  renderPagination(page, pages) {
    let previousButton = <li className="previous" onClick={this.handlePrevious}><a href="#"><i className="fa fa-arrow-left"></i> Previous</a></li>;
    if (page === 1) {
      previousButton = <li className="previous disabled"><a href="#"><i className="fa fa-arrow-left"></i> Previous</a></li>;
    }
    let nextButton = <li className="next" onClick={this.handleNext}><a href="#">Next <i className="fa fa-arrow-right"></i></a></li>;
    if (page === pages) {
      nextButton = <li className="next disabled"><a href="#">Next <i className="fa fa-arrow-right"></i></a></li>;
    }
    return (
      <nav>
        <ul className="pager">
          {previousButton}
          {nextButton}
        </ul>
      </nav>
      );
  }

  render() {
    let pagination = null;
    if (this.state.pages) {
      pagination = this.renderPagination(this.state.page, this.state.pages);
    }
    return (
      <div>
        <PDF file="somefile.pdf" onDocumentComplete={this.onDocumentComplete} onPageComplete={this.onPageComplete} page={this.state.page} />
        {pagination}
      </div>
    );
  }
}

module.exports = ViewPDF;

In an effort to strip the code down to the bare basics and just get a pdf rendering, I alternatively reduced my ponent down to the following. Still, I get the same error.

Alternative (reduced to basics):

import React from 'react';
import PDF from 'react-pdf-js';

export default class ViewPDF extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      page: 0,
      pages: 3
    };

    this.onDocumentComplete = this.onDocumentComplete.bind(this);
    this.onPageComplete = this.onPageComplete.bind(this);
  }

  onDocumentComplete(pages) {
    this.setState({ page: 1, pages });
  }

  onPageComplete(page) {
    this.setState({ page });
  }

  render() {
    return (
      <div>
        <PDF file="somePdfToView.pdf"/>
      </div>
    );
  }
}

Any suggestions?

I have intentionally (to minimize any errors at first) only copied the demo for react-pdf-js, added page and pages in the state to resolve an error, added the closing ); at the end of the render/return to resolve another error, and edited the ponent name. Still, I am getting the error below and am unsure of what it means. It points to the first line of viewingPDF (which is my html extension myapp.firebaseapp./viewingPDF) so it isn't directly pointing to anything wrong in my ponent and I'm unsure how to fix it.

Error:

Uncaught (in promise) 
e
message: "Invalid PDF structure"
name : "InvalidPDFException"
__proto__ : Error at https://myapp.firebaseapp./static/js/main.9108db74.js:34:3985 at Object.<anonymous> (https://myapp.firebaseapp./static/js/main.9108db74.js:34:4013) at Object.<anonymous> (https://myapp.firebaseapp./static/js/main.9108db74.js:34:12954) at t (https://myapp.firebaseapp./static/js/main.9108db74.js:33:27623) at Object.<anonymous> (https://myapp.firebaseapp./static/js/main.9108db74.js:56:12712) at t (https://myapp.firebaseapp./static/js/main.9108db74.js:33:27623) at re (https://myapp.firebaseapp./static/js/main.9108db74.js:33:28006) at https://myapp.firebaseapp./static/js/main.9108db74.js:33:28016 at n.(anonymous function).i (https://myapp.firebaseapp./static/js/main.9108db74.js:33:27496) at Object.<anonymous> (https://myapp.firebaseapp./static/js/main.9108db74.js:33:27500)
stack: "Error↵    at https://myapp.firebaseapp./static/js/main.9108db74.js:34:3985↵    at Object.<anonymous> (https://myapp.firebaseapp./static/js/main.9108db74.js:34:4013)↵    at Object.<anonymous> (https://myapp.firebaseapp./static/js/main.9108db74.js:34:12954)↵    at t (https://myapp.firebaseapp./static/js/main.9108db74.js:33:27623)↵    at Object.<anonymous> (https://myapp.firebaseapp./static/js/main.9108db74.js:56:12712)↵    at t (https://myapp.firebaseapp./static/js/main.9108db74.js:33:27623)↵    at re (https://myapp.firebaseapp./static/js/main.9108db74.js:33:28006)↵    at https://myapp.firebaseapp./static/js/main.9108db74.js:33:28016↵    at n.(anonymous function).i (https://myapp.firebaseapp./static/js/main.9108db74.js:33:27496)↵    at Object.<anonymous> (https://myapp.firebaseapp./static/js/main.9108db74.js:33:27500)"
__proto__: Object
constructor: Error()
message: ""
name: "Error"
toString: toString()
__proto__: Object
__defineGetter__: __defineGetter__()
__defineSetter__: __defineSetter__()
__lookupGetter__: __lookupGetter__()
__lookupSetter__: __lookupSetter__()
constructor: Object()
hasOwnProperty: hasOwnProperty()
isPrototypeOf: isPrototypeOf()
propertyIsEnumerable: propertyIsEnumerable()
toLocaleString: toLocaleString()
toString: toString()
valueOf: valueOf()
get __proto__: __proto__()
set __proto__: __proto__()

This is my ponent implementation (kept close to the demo above):

import React from 'react';
import PDF from 'react-pdf-js';

class ViewPDF extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      page: 0,
      pages: 3
    }
    this.onDocumentComplete = this.onDocumentComplete.bind(this);
    this.onPageComplete = this.onPageComplete.bind(this);
    this.handlePrevious = this.handlePrevious.bind(this);
    this.handleNext = this.handleNext.bind(this);
  }

  onDocumentComplete(pages) {
    this.setState({ page: 1, pages });
  }

  onPageComplete(page) {
    this.setState({ page });
  }

  handlePrevious() {
    this.setState({ page: this.state.page - 1 });
  }

  handleNext() {
    this.setState({ page: this.state.page + 1 });
  }

  renderPagination(page, pages) {
    let previousButton = <li className="previous" onClick={this.handlePrevious}><a href="#"><i className="fa fa-arrow-left"></i> Previous</a></li>;
    if (page === 1) {
      previousButton = <li className="previous disabled"><a href="#"><i className="fa fa-arrow-left"></i> Previous</a></li>;
    }
    let nextButton = <li className="next" onClick={this.handleNext}><a href="#">Next <i className="fa fa-arrow-right"></i></a></li>;
    if (page === pages) {
      nextButton = <li className="next disabled"><a href="#">Next <i className="fa fa-arrow-right"></i></a></li>;
    }
    return (
      <nav>
        <ul className="pager">
          {previousButton}
          {nextButton}
        </ul>
      </nav>
      );
  }

  render() {
    let pagination = null;
    if (this.state.pages) {
      pagination = this.renderPagination(this.state.page, this.state.pages);
    }
    return (
      <div>
        <PDF file="somefile.pdf" onDocumentComplete={this.onDocumentComplete} onPageComplete={this.onPageComplete} page={this.state.page} />
        {pagination}
      </div>
    );
  }
}

module.exports = ViewPDF;

In an effort to strip the code down to the bare basics and just get a pdf rendering, I alternatively reduced my ponent down to the following. Still, I get the same error.

Alternative (reduced to basics):

import React from 'react';
import PDF from 'react-pdf-js';

export default class ViewPDF extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      page: 0,
      pages: 3
    };

    this.onDocumentComplete = this.onDocumentComplete.bind(this);
    this.onPageComplete = this.onPageComplete.bind(this);
  }

  onDocumentComplete(pages) {
    this.setState({ page: 1, pages });
  }

  onPageComplete(page) {
    this.setState({ page });
  }

  render() {
    return (
      <div>
        <PDF file="somePdfToView.pdf"/>
      </div>
    );
  }
}

Any suggestions?

• javascript
• reactjs
• pdf

1 Answer 1

"Invalid PDF Structure".. I'm pretty sure the demo has taken some liberties with that file reference (<PDF file="somePdfToView.pdf"/>). See react-pdf#props for what it should be.