Как правильно интегрировать PDF.js в проект на Typescript?

Question

[Александр Шипин]

Добрый день.
Имеется приложение, реализованное на Typescript, React и Gulp.
Приблизительно недели две назад было принято решение интегрировать новую "фишку": Показывать PDF файл.
У всех ответов на вопрос "Как показывать PDF", которые имеются в интернете, есть общий знаменатель - PDF.js (от Mozilla).
Установили через npm, интегрировали в Gulp сборку pdf.min.js и pdf.min.worker.js, добавили из npm пакета папку types (для типов). Сделали в React компоненте интеграцию решения с официальной документации PDFjs. Cборка проходит успешно.
Но, при инициализации Componenta, который отображает PDF файл, столкнулись с проблемой, что pdfjLib is undefined и какими бы путями данную проблему не пытались решить - ответ одинаков.
Как правильно интегрировать PDF.js в проект на Typescript?

Comments

[WbICHA]

pdfjLib is undefined

Откуда вообще взялась "pdfjLib"?

[Александр Шипин]

WbICHA, из примера здесь либо здесь

говоря другим языком:

import * as React from "react";
 import * as pdfjsLib from "pdfjs-dist";
 // declare var pdfjsLib: any;   - меняли на такое объявление, результат один и тот же. pdfjsLib is undefined

 export class PDFViewer extends React.Component(<any, any>) {
  private state: any;

  constuctor(props) {
   super(props);
   this.state = {};
  }
  
 componentDidMount(): void {
  let task = pdfjsLib.getDocument(this.props.filepath);
   task.promise.then((doc: any) => {
    console.log('Success");
    doc.getPage(1).then((page: any) => {
      this.setState((prevState: any) => {
        return {
          ...prevState,
          page: page
        }
      })
    })
  })
 }

  render(): JSX.Element {
    let {page} = this.state;
    return (
      <div>
        <canvas src={page}/>
      </div>
    )
  }

  и тд
 }

Answer 1

[Николай Турнавиотов]

В начале файла где вызывается этот модуль надо импортировать библиотеку.

Comments

[Александр Шипин]

1. import * as pdfjsLib from "pdfjs-dist" - не работает
2. import pdfjsLib = require("pdfjs-dist") - не работает
3. //@ts-ignore
var pdfjsLib = require("pdfjs-dist") - не работает
4. declare var pdfjsLib: any - не работает

типы все указаны, при написании компонента с использованием типизации ошибок нет.
при сборке приложения через Gulp - ошибок нет
при рендере компонента - ошибка pdfjsLib is undefined

использование любых других обозначений - результат одинаков.