Pdfmake: "export 'default' (imported as 'pdfMake') was not found in 'pdfmake/build/pdfmake' Angular 10.0.0

[aharms24]

After updating from Angular version 9.1.11 to version 10.0.0, I am receiving this error:

"export 'default' (imported as 'pdfMake') was not found in 'pdfmake/build/pdfmake'

[Enngage]

Same here

[liborm85]

This

import pdfMake from "pdfmake/build/pdfmake";

or this

import * as pdfMake from 'pdfmake/build/pdfmake';

doesn't work?

[aharms24]

No, I tried everything I could think of, including your two suggestions.

[liborm85]

Try ask on angular support. Because these are standard imports, I don't know what the problem is in angular

[timdoes]

I am also seeing this issue. And this library is the only one that breaks on import after upgrading to Angular 10

[aharms24]

I will second that. None of my other imports broke either after upgrading to Angular 10.

[pascalklesse]

Same here with Angular 10

[liborm85]

Report it to angular support.

[timdoes]

The break happened when Angular updated the TypeScript version It uses. This TS update must include stricter standards for exporting.

Since Angular Support can’t update the pdfmake code to be compliant with the TypeScript export standards, I guess we will have to look for a solution to replace pdfmake.

[liborm85]

pdfmake use CommonJS standard with module.exports syntax: https://github.com/bpampuch/pdfmake/blob/1c6d6f529790d8fdb425fc09f36ebad4dbe883d7/src/browser-extensions/pdfMake.js#L262-L274

There must be some way in typescript to import such a library with commonjs syntax.

Angular support does not need to update anything in pdfmake library, only say how to import libraries with commonjs in new angular.

[liborm85]

According to post in angular blog typescript is updated to 3.9 in Angular 10.

Release announcement for typescript 3.9 say:

CommonJS Auto-Imports in JavaScript
One great new improvement is in auto-imports in JavaScript files using CommonJS modules.

In older versions, TypeScript always assumed that regardless of your file, you wanted an ECMAScript-style import like

import * as fs from "fs";

However, not everyone is targeting ECMAScript-style modules when writing JavaScript files. Plenty of users still use CommonJS-style require(...) imports like so

const fs = require("fs");

TypeScript now automatically detects the types of imports you’re using to keep your file’s style clean and consistent.

For more details on the change, see the corresponding pull request.

Which means it has to be imported somehow. I don't use typescript or angular, must try how to do it, someone else.

[wittibs]

I am not getting the typescript compilation error, but the imported pdfmake module was undefined after upgrading to angular v10.

I noticed in the pdfmake code that, as a last resort, the import will define the createPdf function on a "global" object (which is the window object in a web browser environment). so this worked for me:

import "pdfmake/build/pdfmake";
const pdfMake = { createPdf: window["createPdf"] }

[weilies]

i also stuck as i need a PDF package for my project, deadly!
i compared with other PDF generator, i have to say i buy the idea not using x,y, html position text and tables! That's why i opt for pdfMake instead of other.

Why not they make pdfMake officially support and maintain for TS folks...?

[liborm85]

But according to the TS documentation it should work...

Can anyone prepare simple example with TypeScript 3.9 and pdfmake, where I just run npm install and something else and this will cause this error? Thanks.

[ashgrey91]

Hi everyone,
I needed to generate a html table into a pdf for a report in my angular project and wanted to use pdfMake because I didnt want to make it complex with axes and everything.I tried pdfmake, ng-pdf-make and import * as but nothing worked.So, I have given up on pdfMake.As I searched for a simple solution,I found the following link very useful.It took me only 10 minutes.It uses jsPDF and jspdf-autotable plugin.You just have to pass the table id and your table will be printed.No need to play with axes.

https://medium.com/@ramamity94/creating-customisable-beautiful-pdfs-using-jspdf-api-aem-and-angular-991dcc988bbd

Here is JsPDF-AutoTable official gitHub page.

https://github.com/simonbengtsson/jsPDF-AutoTable#installation

Hope it helps someone.

[liborm85]

How is this related to this problem?

[ashgrey91]

I also faced this problem and I don't see a working solution for this problem anywhere.If someone like the user, weilies is willing to go for an alternative but dont want to, I quote "i buy the idea not using x,y, html position text and tables!",they can migrate from PDFMake to JsPDF easily.

[liborm85]

Tested with TypeScript 4.0.2, and this way is working:

import * as pdfMake from "pdfmake/build/pdfmake";
import * as pdfFonts from 'pdfmake/build/vfs_fonts';

(<any>pdfMake).vfs = pdfFonts.pdfMake.vfs;

In TypeScript * as is required as already mentioned in my first post...

[liborm85]

No reaction. I take the problem as solved as write above.

[aaronfrost]

Same issue. Anyone get a fix/workaround for this? I really am not looking forward to copying the source into my project and fixing a copy of the project.

[wittibs]

@aaronfrost try this

import "pdfmake/build/pdfmake"
const pdfMake = window["pdfMake"];

[Joemarc]

@wittibs It worked for me but on ReactJs, thanks :)

If it can help anyone, here is my imports

```import "pdfmake/build/pdfmake"
import moment from 'moment';
import pdfFonts from 'pdfmake/build/vfs_fonts';

const pdfMake = window["pdfMake"];
pdfMake.vfs = pdfFonts.pdfMake.vfs;