Vite Packing error vfs_fonts

[Kimser]

ERROR 'default' is not exported by node_modules/pdfmake/build/vfs_fonts.js, imported by ......

[izidorio]

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

[izidorio]

Interim Solution

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.

[ivanbtrujillo]

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

[JDPedroza]

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);

[panch8]

Interim Solution

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;

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

[habeebijaba]

Interim Solution for Vite+React+JS

// 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;

Refer : https://pdfmake.github.io/docs/0.1/fonts/custom-fonts-client-side/url/#1-assign-pdfmakefonts-your-font-files-in-your-javascript

[Joecey]

@habeebijaba works for me ;))

[Youssif-Salama]

Interim Solution

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.

thank you bro it worked for me

[liborm85]

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