Having trouble incorporating @types/pdfmake into an Angular project

Question

Having trouble incorporating @types/pdfmake into an Angular project

I have been experimenting with integrating a JS library called pdfmake into an Angular application. I found some guidance on how to accomplish this at https://www.freecodecamp.org/news/how-to-use-javascript-libraries-in-angular-2-apps/, which involved using the @types/pdfmake package.

To install @types/pdfmake, I used the following command:

npm install --save @types/pdfmake

In one of my components, I imported pdfmake like this:

import * as pdfMake from 'pdfmake/build/pdfmake';  
import * as pdfFonts from 'pdfmake/build/vfs_fonts';
(<any>pdfMake).vfs = pdfFonts.pdfMake.vfs;

To leverage the types in pdfmake, I included the following import:

import * as _ from 'pdfmake';

However, upon doing so, I encountered this error:

This module can only be referenced with ECMAScript imports/exports by turning on the 'allowSyntheticDefaultImports' flag and referencing its default export.

In attempting to address this issue, I made adjustments to my tsconfig.json file as shown here:

{
  "compileOnSave": false,
  "allowSyntheticDefaultImports":true,
  "esModuleInterop": true,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "module": "es2020",
    "lib": [
      "es2018",
      "dom"
    ]
  }
}

Despite these modifications, the error message regarding ECMAScript imports/exports persisted.

Edit:

I revised the tsconfig file to the following configuration:

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "allowSyntheticDefaultImports":true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "module": "es2020",
    "lib": [
      "es2018",
      "dom"
    ]
  }
}

However, the error persisted even after this adjustment.

angular typescript pdfmake

Answer 1

Answer №1

To ensure it works properly, include your allowSyntheticDefaultImports setting within the compilerOptions block instead of outside it.

`"compilerOptions": { "allowSyntheticDefaultImports":true, }

Answer 2

To ensure it works properly, include your allowSyntheticDefaultImports setting within the compilerOptions block instead of outside it.

`"compilerOptions": { "allowSyntheticDefaultImports":true, }

Answer 3

Answer №2

function importAndNormalize<T>(
  resourcePromise: Promise<T>
): Promise<T> {
  // Normalizing CommonJS imports to ESModule format by handling 'default' property
  return resourcePromise.then((resource: any) => (resource.default || resource) as T);
}

// Dynamically loading pdfmake library using import()
const importPdfMake = importAndNormalize(import('pdfmake/build/pdfmake.min'));

const importPdfFonts = importAndNormalize(import('pdfmake/build/vfs_fonts'));


// Implementation in a service or component
async function generatePDFDocument(): Promise<void> {
    const pdfMake = await importPdfMake;
    const pdfFonts = await importPdfFonts;

    pdfMake.vfs = pdfFonts.pdfMake.vfs;
    const docDefinition: TDocumentDefinitions = {
       content: [
         'First paragraph',
         'Another paragraph, this time a little bit longer to ensure it wraps into multiple lines',
       ],
    };
    pdfMake.createPdf(docDefinition).open();
  }

In addition, the tsconfig should have the setting

"module": "ESNext"

or higher for dynamic loading of libraries.

Answer 4

function importAndNormalize<T>(
  resourcePromise: Promise<T>
): Promise<T> {
  // Normalizing CommonJS imports to ESModule format by handling 'default' property
  return resourcePromise.then((resource: any) => (resource.default || resource) as T);
}

// Dynamically loading pdfmake library using import()
const importPdfMake = importAndNormalize(import('pdfmake/build/pdfmake.min'));

const importPdfFonts = importAndNormalize(import('pdfmake/build/vfs_fonts'));


// Implementation in a service or component
async function generatePDFDocument(): Promise<void> {
    const pdfMake = await importPdfMake;
    const pdfFonts = await importPdfFonts;

    pdfMake.vfs = pdfFonts.pdfMake.vfs;
    const docDefinition: TDocumentDefinitions = {
       content: [
         'First paragraph',
         'Another paragraph, this time a little bit longer to ensure it wraps into multiple lines',
       ],
    };
    pdfMake.createPdf(docDefinition).open();
  }

In addition, the tsconfig should have the setting

"module": "ESNext"

or higher for dynamic loading of libraries.

Having trouble incorporating @types/pdfmake into an Angular project

Answer №1

Answer №2

Similar questions

Expanding a class in Typescript by adding a function with the same name but varying properties and types

Angular 2 module transpilation services

What is the best way to refine the dataSource for a table (mat-table) using ngx-daterangepicker-material?

Updating documents within an array in MongoDB is a common task that can be easily accomplished

Can the Angular CLI be installed without using the command prompt?

Show objects based on issuance date

Error in TypeScript: Circular reference in type alias 'Argument' in node_modules/classnames/index.d.ts at line 13:13

Error in VueJS/Typescript: Module 'my-module' or its type declarations are not found

Creating a dynamic table in HTML and Angular is a simple process that involves utilizing the

Access your Angular 2 application on an external device during the development process

The module rxjs/operators cannot be located

Guide to resolving the issue of error Type 'void[] | undefined' cannot be assigned to type 'ReactNode'

Problem integrating 'fs' with Angular and Electron

Converting Angular 5 select option values to strings is a must

Angular is having trouble with the toggle menu button in the Bootstrap template

What is the method for defining a mandatory incoming property in an Angular2 component?

Avoiding the use of destructuring for undefined values in JavaScript can be achieved by implementing

Issues with connecting to server through Angular websocket communication

Issue encountered while generating menu using Angular's Material framework

Is it more beneficial to convert all the current jQuery AJAX webparts into Typescript or should I opt to inject the existing jQuery into SPFX instead?