Open Kimser opened 1 year ago
I'm having the same error when building
my code
import * as pdfFonts from "pdfmake/build/vfs_fonts";
import * as pdfMake from "pdfmake/build/pdfmake";
(<any>pdfMake).vfs = pdfFonts.pdfMake.vfs;
versios
"pdfmake": "^0.2.8",
"react": "^18.2.0",
"typescript": "^5.0.2",
"vite": "^4.4.5"
console output
npm run build
vite v4.4.8 building for production...
src/components/pdf-make/index.ts (72:15) "pdfMake" is not exported by "node_modules/pdfmake/build/vfs_fonts.js", imported by "src/components/pdf-make/index.ts".
I created the file ./vfs_fontes.ts
in my project with the content node_modules/pdfmake/build/vfs_fonts.js
leaving it as follows
original code node_modules/pdfmake/build/vfs_fonts.js
this.pdfMake = this.pdfMake || {}; this.pdfMake.vfs = {"Roboto-Italic.ttf":"AAEAAAARA ... AA0AA1AAA="};
sample my code ./vfs_fontes.ts
export default { "Roboto-Italic.ttf": "AAEAAAARAQAABAAQR0RFRqbz ... 0AjQAwAJgAmwAxANAA0AA1AAA="};
sample my code ./index.ts
import * as pdfFonts from "./vfs_fontes"; // ๐ local import
import pdfMake from "pdfmake/build/pdfmake";
(<any>pdfMake).vfs = pdfFonts.default;
Another simpler solution is to download the source from the CDN
sample my code ./index.ts
import pdfMake from "pdfmake/build/pdfmake";
(<any>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",
},
};
@Kimser this is what worked for me, for now I will use it this way and monitor this problem until a definitive solution is found.
@izidorio approach works, but it gives me an error as we're trying to mutate the import:
Imports are immutable in JavaScript. To modify the value of this import, you must export a setter function in the imported file (e.g. โsetFontsโ) and then import and call that function here instead.
The safe way I found to do it is by passing down our vfs fonts as an argument to createPdf (you can see it is supported, based on @types/pdfmake):
So the change is the following, instead of this:
import { vfs_fonts } from './vfs_fonts';
(<any>pdfMake).vfs = pdfFonts.default;
do this:
import * as pdfMake from 'pdfmake/build/pdfmake.js';
import { vfs_fonts } from './vfs_fonts';
....
pdfMake.createPdf(docDefinition, undefined, undefined, vfs_fonts).download();
Now the app works as expected in dev mode, but also after building it.
import pdfMake from "pdfmake/build/pdfmake";
export const generatePDFClient = (data) => { const { figures, totales, nidQuoter, name, phone, typeDocument, numberDocument, } = data; const date = new Date();
return new Promise((resolve, reject) => { 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", }, };
var dd = {...}
const pdfDocGenerator = pdfMake.createPdf(dd);
Interim Solution
I created the file
./vfs_fontes.ts
in my project with the contentnode_modules/pdfmake/build/vfs_fonts.js
leaving it as followsoriginal code
node_modules/pdfmake/build/vfs_fonts.js
this.pdfMake = this.pdfMake || {}; this.pdfMake.vfs = {"Roboto-Italic.ttf":"AAEAAAARA ... AA0AA1AAA="};
sample my code
./vfs_fontes.ts
export default { "Roboto-Italic.ttf": "AAEAAAARAQAABAAQR0RFRqbz ... 0AjQAwAJgAmwAxANAA0AA1AAA="};
sample my code
./index.ts
import * as pdfFonts from "./vfs_fontes"; // ๐ local import import pdfMake from "pdfmake/build/pdfmake"; (<any>pdfMake).vfs = pdfFonts.default;
it worked for me also like this! just thet fact to create a vfs_fotns.ts file with this structure:
export default {"Roboto-Italic.ttf": "AAEAAAARAQAABAAQR0RFRqbzo4gAAddgAAACWEdQT1N/jK....AAAAAAAAAA"}
and import it directly in my code base. where:
import pdfMake from "pdfmake/build/pdfmake"; pdfMake.vfs = pdfFonts
// import statement
import pdfMake from "pdfmake/build/pdfmake";
// Defining and Using Custom Fonts
const pdfMakeFonts = {
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",
},
};
// Assign the custom fonts to pdfMake
pdfMake.fonts = pdfMakeFonts;
@habeebijaba works for me ;))
Interim Solution
I created the file
./vfs_fontes.ts
in my project with the contentnode_modules/pdfmake/build/vfs_fonts.js
leaving it as followsoriginal code
node_modules/pdfmake/build/vfs_fonts.js
this.pdfMake = this.pdfMake || {}; this.pdfMake.vfs = {"Roboto-Italic.ttf":"AAEAAAARA ... AA0AA1AAA="};
sample my code
./vfs_fontes.ts
export default { "Roboto-Italic.ttf": "AAEAAAARAQAABAAQR0RFRqbz ... 0AjQAwAJgAmwAxANAA0AA1AAA="};
sample my code
./index.ts
import * as pdfFonts from "./vfs_fontes"; // ๐ local import import pdfMake from "pdfmake/build/pdfmake"; (<any>pdfMake).vfs = pdfFonts.default;
Another simpler solution is to download the source from the CDN sample my code
./index.ts
import pdfMake from "pdfmake/build/pdfmake"; (<any>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", }, };
@Kimser this is what worked for me, for now I will use it this way and monitor this problem until a definitive solution is found.
thank you bro it worked for me
In version 0.2.15 changed VFS format. (Custom VFS files require rebuild.)
Now works this simple import:
import pdfMake from "pdfmake/build/pdfmake";
import "pdfmake/build/vfs_fonts";
(Tested on vite + react jsx.)
Other way for frameworks where not available global can be used:
import pdfMake from "pdfmake/build/pdfmake";
import pdfFonts from "pdfmake/build/vfs_fonts";
pdfMake.addVirtualFileSystem(pdfFonts);
or see documentation
ERROR 'default' is not exported by node_modules/pdfmake/build/vfs_fonts.js, imported by ......