pdfmake__WEBPACK_IMPORTED_MODULE_16___default Reactjs error

Question

When I start my project this returns the following error:

TypeError: pdfmake__WEBPACK_IMPORTED_MODULE_16___default.a is not a constructor

Follows information:

Import:

import _ from 'lodash';
import moment from 'moment-timezone';
import PdfMake from 'pdfmake';
import fs from 'fs';

Block:

const fonts = {
  Roboto: {
    normal: 'fonts/Roboto/Roboto-Regular.ttf',
    bold: 'fonts/Roboto/Roboto-Medium.ttf',
    italics: 'fonts/Roboto/Roboto-Italic.ttf'
  }
};

const printer = new PdfMake(fonts);

const pdfDoc = printer.createPdfKitDocument(docDefinition);

const filename = "boleto-" + bolNossoNumero + ".pdf";
const file = filename;
console.log(docDefinition);
console.log(filename);
console.log(file);

pdfDoc.pipe(fs.createWriteStream(filename));
pdfDoc.end();

pdfDoc.on('end', function () {
  console.log(filename);
});

Error block:

  905 |      }
  906 |    };
  907 | 
> 908 |    const printer = new PdfMake(fonts);
      | ^  909 | 
  910 |    const pdfDoc = printer.createPdfKitDocument(docDefinition);
  911 | 

package json.

{
  "name": "react",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^4.11.0",
    "@material-ui/icons": "^4.9.1",
    "@material-ui/lab": "^4.0.0-alpha.56",
    "@material-ui/pickers": "^3.2.10",
    "@react-pdf/pdfkit": "^1.5.0",
    "@react-pdf/renderer": "^1.6.12",
    "async": "^3.2.0",
    "axios": "^0.19.2",
    "base64-stream": "^1.0.0",
    "bootstrap": "^4.5.2",
    "bwip-js": "^2.0.11",
    "classlist.js": "^1.1.20150312",
    "datatables.net": "^1.10.21",
    "dotenv": "^8.2.0",
    "fs": "0.0.1-security",
    "fs-react": "0.0.4",
    "gerar-boletos": "^1.4.5",
    "jspdf": "^1.5.3",
    "jspdf-autotable": "^3.5.13",
    "jspdf-react": "^1.0.11",
    "loadsh": "0.0.4",
    "lodash": "^4.17.20",
    "material-table": "^1.68.1",
    "material-ui": "^0.20.2",
    "moment": "^2.29.1",
    "moment-timezone": "^0.5.32",
    "mui-datatables": "^2.15.0",
    "n_": "^3.0.0",
    "node-sass": "^4.14.1",
    "pdfkit": "^0.11.0",
    "pdfmake": "^0.1.68",
    "react": "^16.13.1",
    "react-bootstrap": "^1.3.0",
    "react-charts": "^2.0.0-beta.7",
    "react-data-export": "^0.6.0",
    "react-dom": "^16.13.1",
    "react-download-link": "^2.3.0",
    "react-export-excel": "^0.5.3",
    "react-google-charts": "^3.0.15",
    "react-html-table-to-excel": "^2.0.0",
    "react-loading": "^2.0.3",
    "react-material-ui-carousel": "^1.8.2",
    "react-pdfmake": "^0.3.0",
    "react-responsive-carousel": "^3.2.9",
    "react-router-dom": "^5.2.0",
    "react-scripts": "^3.4.3",
    "react-slick": "^0.25.2",
    "react-spinners": "^0.8.3",
    "react-to-print": "^2.9.0",
    "simple-pad": "^1.0.2",
    "styled-components": "^4.4.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Answer 1

Like you’re wearing typescript (probably) then as I had already commented have to use the client-side mode of that lib:

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

If you’re gonna use via Virtual file system (VFS):

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

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

In summary in Angular, Ionic or similar applications use the path "pdfmake/build/pdfmake", for back-end use only "pdfmake" as described in https://pdfmake.github.io/docs/0.1/getting-started/server-side/, what is not your case.