title: Pdf.js pdfjsLib.getDocument() is not working In React
body: <p>I have built a web site with <code>create-react-app</code>, I am using <code>"react-dom": "^16.9.0", "react": "^16.9.0"</code>, and have installed <code>"pdfjs-dist": "^2.2.228"</code>.</p>
  
  <p>I have try the same exact code posted below, installing the same version of <code>pdfjs-dist</code> in a cloned repository, <a href="https://github.com/yurydelendik/pdfjs-react" rel="nofollow noreferrer">https://github.com/yurydelendik/pdfjs-react</a> and getting it to work there. The only thing I think might be causing problem is my react version or react-dom version, but I cannot downgrade as this React version delivers hooks functionality. </p>
  
  <p>PS: I tried to install <code>"pdfjs-dist": "^1.8.432"</code> in my React project and had the following error: </p>
  
  <blockquote>
    <p>./node_modules/pdfjs-dist/build/pdf.worker.js
    (./node_modules/worker-loader!./node_modules/pdfjs-dist/build/pdf.worker.js)
    TypeError: Cannot read property 'context' of undefined ```js</p>
  </blockquote>
  
  <pre class="lang-js prettyprint-override"><code>import React, { Component } from 'react';
  import './App.css';
  import pdfjsLib from 'pdfjs-dist/webpack';
  import axios from "axios";
  
  class App extends Component {
  
    handleChange =  async (e) =&gt; {
        var formData = new FormData();
        formData.append("file", e.target.files[0]);
  
        try {
          const res = await axios.post("http://localhost:8080/files/convert",  formData, {
              headers: {
                'Content-Type': 'multipart/form-data'
              }
          });
  
          var ab = new ArrayBuffer(res.data.data.data.length);
          var view = new Uint8Array(ab);
          for (var i = 0; i &lt; res.data.data.data.length; ++i) {
              view[i] = res.data.data.data[i];
          }
  
          var blob = new Blob([ab], {type: 
            "application/pdf"}); 
  
    debugger
          let loadingTask = pdfjsLib.getDocument(ab);
          loadingTask.promise.then((doc) =&gt; {
            doc.getPage(1).then(function getPageHelloWorld(page) {
            debugger
            var scale = 0.5;
            var viewport = page.getViewport(scale);
            //
            // Prepare canvas using PDF page dimensions
            //
            var canvas = document.getElementById('the-canvas');
            var context = canvas.getContext('2d');
            debugger
            canvas.height = viewport.height / 2;
            canvas.width = viewport.width;
            //
            // Render PDF page into canvas context
            //
            var task = page.render({canvasContext: context, viewport: viewport})
            task.promise.then(function(){
              console.log(canvas.toDataURL('image/jpeg'));
            });
          });
        }, (reason) =&gt; {
          console.error(`loading: ${reason}`);
        });   
      } catch(err) {
          console.log(err)
      };
     }
  
    render() {
      return (
        &lt;div className="App"&gt;
          &lt;div className="App-header"&gt;
            &lt;input class="btn btn-dark" type="file" onChange={this.handleChange}/&gt;
          &lt;/div&gt;
          &lt;div className="App-body"&gt;
            &lt;canvas id="the-canvas" style={{border:'1px solid black'}}&gt;&lt;/canvas&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default App;
  </code></pre>