"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:

pdfmake/src/browser-extensions/pdfMake.js

Lines 262 to 274 in 1c6d6f5

	module.exports = {
	createPdf: function (docDefinition, tableLayouts, fonts, vfs) {
	if (!canCreatePdf()) {
	throw 'Your browser does not provide the level of support needed';
	}
	return new Document(
	docDefinition,
	tableLayouts || global.pdfMake.tableLayouts,
	fonts || global.pdfMake.fonts,
	vfs || global.pdfMake.vfs
	);
	}
	};

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"] }

[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.

[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 moment from 'moment';
import pdfFonts from 'pdfmake/build/vfs_fonts';

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

[pradeep199896]

@wittibs This worked for me man!Thankss

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

[sanD9090]

var pdfMake = require('pdfmake/build/pdfmake');
var pdfFonts = require('pdfmake/build/vfs_fonts');
pdfMake.vfs = pdfFonts.pdfMake.vfs;

[8483]

@aaronfrost try this

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

THANK FUCK! This finally worked. What a piece of shit importing approach for such a good library... I hope they fix it...

After wasting 3 fucking hours on this, here is the final working solution:

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

pdfMake.fonts = {
    Roboto: {
        normal: "https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Roboto/Roboto-Regular.ttf",
        bold: "https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Roboto/Roboto-Medium.ttf",
        italics: "https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Roboto/Roboto-Italic.ttf",
        bolditalics: "https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Roboto/Roboto-MediumItalic.ttf",
    },
};

[maxfortatacado]

@aaronfrost try this

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

THANK FUCK! This finally worked. What a piece of shit importing approach for such a good library... I hope they fix it...

After wasting 3 fucking hours on this, here is the final working solution:

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

pdfMake.fonts = {
    Roboto: {
        normal: "https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Roboto/Roboto-Regular.ttf",
        bold: "https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Roboto/Roboto-Medium.ttf",
        italics: "https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Roboto/Roboto-Italic.ttf",
        bolditalics: "https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Roboto/Roboto-MediumItalic.ttf",
    },
};

Worked perfectly for me!

[fernandoscheffel]

@aaronfrost try this

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

THANK FUCK! This finally worked. What a piece of shit importing approach for such a good library... I hope they fix it...

After wasting 3 fucking hours on this, here is the final working solution:

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

pdfMake.fonts = {
    Roboto: {
        normal: "https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Roboto/Roboto-Regular.ttf",
        bold: "https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Roboto/Roboto-Medium.ttf",
        italics: "https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Roboto/Roboto-Italic.ttf",
        bolditalics: "https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Roboto/Roboto-MediumItalic.ttf",
    },
};

Thank you!!

[rajeev1202]

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...

Thanks.It worked for me , i'm using Angular 16.2.0 and typescript 5.1.3 .

[eurival]

how make to use in pure javascript ?

[cromanauter]

This works in angular 17 :
import * as pdfMake from 'pdfmake/build/pdfmake';