error TS2540: Cannot assign to 'vfs' because it is a read-only property

Question

Im Trying to generate PDF using pdfmaker. In my code it dosent show any errors.but when compiling it show below error. but also pdf is working and generating.

error TS2540: Cannot assign to 'vfs' because it is a read-only property.

>   19 pdfMake.vfs = pdfFonts.pdfMake.vfs;
>                ~~~
>     src/app/component/invoice/invoice.component.ts:235:25 - error TS2345: Argument of type '{ content: ({ text: string; fontSize:
> number; alignment: string; color: string; bold?: undefined;
> decoration?: undefined; style?: undefined; columns?: undefined; } | {
> text: string; fontSize: number; bold: boolean; ... 4 more ...;
> columns?: undefined; } | { ...; } | { ...; })[]; styles: { ...; }; }'
> is not assignable to parameter of type 'TDocumentDefinitions'.
>       Types of property 'content' are incompatible.
>         Type '({ text: string; fontSize: number; alignment: string; color: string; bold?: undefined; decoration?: undefined; style?:
> undefined; columns?: undefined; } | { text: string; fontSize: number;
> bold: boolean; ... 4 more ...; columns?: undefined; } | { ...; } | {
> ...; })[]' is not assignable to type 'Content'. 
>           Type '({ text: string; fontSize: number; alignment: string; color: string; bold?: undefined; decoration?: undefined; style?:
> undefined; columns?: undefined; } | { text: string; fontSize: number;
> bold: boolean; ... 4 more ...; columns?: undefined; } | { ...; } | {
> ...; })[]' is not assignable to type 'ArrayOfContent'.
>             The types returned by 'pop()' are incompatible between these types.
>               Type '{ text: string; fontSize: number; alignment: string; color: string; bold?: undefined; decoration?: undefined;
> style?: undefined; columns?: undefined; } | { text: string; fontSize:
> number; bold: boolean; ... 4 more ...; columns?: undefined; } | { ...;
> } | { ...; } | undefined' is not assignable to type 'string |
> ArrayOfContent | ContentText | ContentColumns | ContentStack |
> ContentUnorderedList | ... 11 more ... | undefined'.
>                 Type '{ text: string; fontSize: number; alignment: string; color: string; bold?: undefined; decoration?: undefined;
> style?: undefined; columns?: undefined; }' is not assignable to type
> 'string | ArrayOfContent | ContentText | ContentColumns | ContentStack
> | ContentUnorderedList | ... 11 more ... | undefined'.
>                   Property 'tocItem' is missing in type '{ text: string; fontSize: number; alignment: string; color: string; bold?:
> undefined; decoration?: undefined; style?: undefined; columns?:
> undefined; }' but required in type 'ContentTocItem'.
>     
>     235       pdfMake.createPdf(docDefinition).download();
>                                 ~~~~~~~~~~~~~
>     
>       node_modules/@types/pdfmake/interfaces.d.ts:253:5
>         253     tocItem: boolean | string | string[];
>                 ~~~~~~~
>         'tocItem' is declared here.
>     src/app/component/invoice/invoice.component.ts:237:25 - error TS2345: Argument of type '{ content: ({ text: string; fontSize:
> number; alignment: string; color: string; bold?: undefined;
> decoration?: undefined; style?: undefined; columns?: undefined; } | {
> text: string; fontSize: number; bold: boolean; ... 4 more ...;
> columns?: undefined; } | { ...; } | { ...; })[]; styles: { ...; }; }'
> is not assignable to parameter of type 'TDocumentDefinitions'.
>     
>     237       pdfMake.createPdf(docDefinition).print();
>                                 ~~~~~~~~~~~~~
>     src/app/component/invoice/invoice.component.ts:239:25 - error TS2345: Argument of type '{ content: ({ text: string; fontSize:
> number; alignment: string; color: string; bold?: undefined;
> decoration?: undefined; style?: undefined; columns?: undefined; } | {
> text: string; fontSize: number; bold: boolean; ... 4 more ...;
> columns?: undefined; } | { ...; } | { ...; })[]; styles: { ...; }; }'
> is not assignable to parameter of type 'TDocumentDefinitions'.
>     
>     239       pdfMake.createPdf(docDefinition).open();

This is my component.ts code and im using generatePDf function to generate pdf and its working fine and no error showing.

import * as pdfMake from 'pdfmake/build/pdfmake.js';
import * as pdfFonts from 'pdfmake/build/vfs_fonts.js';
pdfMake.vfs = pdfFonts.pdfMake.vfs;


 generatePDF(action = "open") {
    let docDefinition = {
      content: [
        {
          text: "Indika Agro Sales and Service Center",
          fontSize: 16,
          alignment: "center",
          color: "#047886",
        },
        {
          text: "INVOICE",
          fontSize: 20,
          bold: true,
          alignment: "center",
          decoration: "underline",
          color: "skyblue",
        },
        {
          text: "Customer Details",
          style: "sectionHeader",
        },
        {
          columns: [
              [
                  {
                      text: this.invoiceform.value.customerName,
                      bold: true
                  },
                  { text:this.invoiceform.value.cusPhnNumber,  }
              ],
              [
                  {
                      text: `Date: ${new Date().toLocaleString()}`,
                      alignment: 'right'
                  },
                  {
                      text: `Bill No : ${((Math.random() * 1000).toFixed(0))}`,
                      alignment: 'right'
                  }
              ]
          ]
      },
      ],
      styles: {
        sectionHeader: {
          bold: true,
          decoration: "underline",
          fontSize: 14,
          margin: [0, 15, 0, 15],
        },
      },
    };

    if (action === "download") {
      pdfMake.createPdf(docDefinition).download();
    } else if (action === "print") {
      pdfMake.createPdf(docDefinition).print();
    } else {
      pdfMake.createPdf(docDefinition).open();
    }
  }

Answer 1

I'm using typescript, but the solution marked here did not work for me, and instead gave me this error:

Cannot assign to import "vfs"

If you see this, the solution to use instead is:

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

(pdfMake as any).vfs = pdfFonts.pdfMake.vfs;

Answer 2

I was using vite to compile the react apps, and then it throws this error that vfs is read only property and cannot be assigned. What worked for me: I copied the pdfmake/build/vfs_fonts.js to my src directory and changed the first line from: this.pdfMake=this.pdfMake||{};this.pdfMake.vfs={

To const pdfFonts={

Rest the file remains same, then at end I added default export:export default pdfFonts;

Then in the file where I want to use pdfmake to createpdf, I did this thing:

import pdfmake from 'pdfmake/build/pdfmake';
import pdfFonts from './vfs_fonts';
pdfmake.vfs=pdfFonts;

Answer 3

If you use a typing script ...:

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

(pdfMake as any).vfs = pdfFonts.pdfMake.vfs;