Uncaught TypeError: pdfjsLib.getDocument(...).then is not a function

Question

My componentDidMount have some issues only for loading PDF files

getting componentDidMount Uncaught TypeError: pdfjsLib.getDocument(...).then is not a function
    at PdfViewer.componentDidMount (pdfViewer.jsx?5761:26)
    at commitLifeCycles (react-dom.development.js?61bb:19814)

import React from 'react';
import PropTypes from 'prop-types';
import BaseComponent from './helpers/baseComponent.jsx';

var pdfjsLib = require('pdfjs-dist');

pdfjsLib.PDFWorker.workerSrc = '../../pdf.worker.bundle.js';
export default class PdfViewer extends BaseComponent {
  constructor(props) {
    super(props);
    this.state = {
      pdf: null,
      scale: 1,
    };
    this._bind('getChildContext');
  }

  getChildContext() {
    return {
      pdf: this.state.pdf,
      scale: this.state.scale,
    };
  }

  componentDidMount() {
    pdfjsLib.getDocument({ data: this.props.pdfData }).then((pdf) => {
      this.setState({ pdf: pdf });
    });
  }

  render() {
    return (
      <div className="pdf-context">
        <Viewer />
      </div>
    );
  }
}

PdfViewer.propTypes = {
  pdfData: PropTypes.string,
};

PdfViewer.childContextTypes = {
  pdf: PropTypes.object,
  scale: PropTypes.number,
};

class Page extends BaseComponent {
  constructor(props) {
    super(props);
    this.state = {
      status: 'N/A',
      page: null,
      width: 0,
      height: 0,
    };
    this.canvas = React.createRef();
  }

  shouldComponentUpdate(nextProps, nextState, nextContext) {
    return this.context.pdf !== nextContext.pdf || this.state.status !== nextState.status;
  }

  componentDidMount() {
    this._update(this.context.pdf);
  }

  _update(pdf) {
    if (pdf) {
      this._loadPage(pdf);
    } else {
      this.setState({ status: 'loading' });
    }
  }

  _loadPage(pdf) {
    if (this.state.status === 'rendering' || this.state.page !== null) return;
    pdf.getPage(this.props.index).then(this._renderPage.bind(this));
    this.setState({ status: 'rendering' });
  }

  _renderPage(page) {
    const { scale } = this.context;
    const viewport = page.getViewport(scale);
    const { width, height } = viewport;
    const canvas = this.canvas.current;
    const context = canvas.getContext('2d');
    canvas.width = width;
    canvas.height = height;

    page.render({
      canvasContext: context,
      viewport,
    });

    this.setState({ status: 'rendered', page, width, height });
  }

  render() {
    const { width, height, status } = this.state;
    return (
      <div className={'pdf-page ' + status} style={{ width, height }}>
        <canvas ref={this.canvas} />
      </div>
    );
  }
}

Page.propTypes = {
  index: PropTypes.number.isRequired,
};
Page.contextTypes = PdfViewer.childContextTypes;

class Viewer extends React.Component {
  render() {
    const { pdf } = this.context;
    const numPages = pdf ? pdf._pdfInfo.numPages : 0;
    const fingerprint = pdf ? pdf._pdfInfo.fingerprint : 'none';
    const pages = Array.apply(null, { length: numPages }).map((v, i) => (
      <Page index={i + 1} key={`${fingerprint}-${i}`} />
    ));

    return <div className="pdf-viewer">{pages}</div>;
  }
}
Viewer.contextTypes = PdfViewer.childContextTypes;

am pass value in prop as Base64 encoded

Answer 1

getDocument does not return a promise. It looks like it returns an internal object with a property exposing a promise.

From their test files

var loadingTask = (0, _api.getDocument)(basicApiGetDocumentParams);
const destroyed = loadingTask.destroy();
loadingTask.promise.then(function (reason) {
        done.fail("shall fail loading");
      }).catch(function (reason) {
        expect(true).toEqual(true);
        destroyed.then(done);
      });