How can I get TypeScript to load the PDF.js NPM module and @types bindings in a way that generates working Node.JS code?

Zac B picture Zac B · Oct 14, 2017 · Viewed 11.1k times · Source

Context

I'm trying to import PDF.JS into a TypeScript project. I'm using the DefinitelyTyped bindings for pdfjs-dist, installed via npm install @types/pdfjs-dist and npm install pdfjs-dist.

Problem

I can't seem to get TypeScript to compile my project. I'm using source code copied straight from the tests on DefinitelyTyped. This is the simplified (deletions only) code I'm trying to compile (an exact copy of the test code from DefinitelyTyped also fails in the same way):

import { PDFJSStatic } from 'pdfjs-dist';
var PDFJS: PDFJSStatic;
PDFJS.getDocument('helloworld.pdf').then(console.log);

TypeScript finds the type declarations module, and considers the import of PDFJSStatic to be valid. It doesn't think PDFJS is ever initialized, but if I turn off strict in tsconfig, the code compiles, but it compiles to:

"use strict";
exports.__esModule = true;
var PDFJS;
PDFJS.getDocument('helloworld.pdf').then(console.log);

Which obviously doesn't work. It's not compiling the import statement into anything.

Question

How can I import PDF.JS into a TypeScript project and compile it into working Node.JS code via the declaration files in @types/pdfjs-dist?

What I've Tried

I've tried different variations on import, to no avail. Switching to require also doesn't seem to help.

I've verified that the pdjs-dist dependency, and the @types/pdfjs-dist dependencies are present, updated, and usable directly from NodeJS (non-TypeScript programs).

I've tried various values for module in my tsconfig. They change the generated code sometimes, but none of them change it to contain the needed import.

I've tried adding /// <reference path="../node_modules/@types/pdfjs-dist/index.d.ts" /> above the import line. That didn't change the behavior.

Environment

tsc version 2.4.2, node 8.5, and npm 5.3. I have the following tsconfig.json in my project root:

{
    "compilerOptions": {
        "allowJs":true,
        "rootDir": ".",
        "outDir": "dist",
        "moduleResolution": "node"
    },
     "include": [
        "src/**/*"
    ],
    "exclude": [
        "**/*.spec.ts",
        "dist/**/*"
    ]
}

Answer

Azoson picture Azoson · Nov 12, 2017

Maybe you can use require function.

Add @types/node packages, and write require('pdfjs-dist') at the top of the your source code. So, you can modify your code like below.

Now, this code will work.

import { PDFJSStatic } from 'pdfjs-dist';
const PDFJS: PDFJSStatic = require('pdfjs-dist');
PDFJS.getDocument('helloworld.pdf').then(console.log);

I think that @types/pdfjs-dist has problems in its implementation.