pdfMake: "Uncaught File [font.tff]" appears to prevent function from working

Question

I've never used pdfMake before and I'm trying to convert some text into a PDF via a button click. I'm importing pdfMake into index.js so I'm not sure if pdfMake itself is working or not.

I'm getting a console error: Uncaught File 'Roboto-Regular.ttf' not found in virtual file system and I believe it's preventing the function from running. I tweaked my index.js file a bit (see commented code), but still nothing. Any thoughts on this one?

index.js:

import 'jquery';
import './SiteAssets/styles/RecruitmentTracking.css';
import 'bootstrap/dist/css/bootstrap.min.css';

import './SiteAssets/scripts/printPDF.js';

import 'jquery-ui-bundle/jquery-ui.min.js';
import 'bootstrap/dist/js/bootstrap.bundle.min.js';

import 'pdfmake/build/pdfmake.min.js';
import 'pdfmake/build/vfs_fonts';

// import pdfFonts from "pdfmake/build/vfs_fonts";
// pdfMake.vfs = pdfFonts.pdfMake.vfs;
// require('imports-loader?this=>window!pdfmake/build/vfs_fonts.js');

console.log('this is index.js');

printPDF.js:

import $ from 'jquery';
// import { pdfMake } from 'pdfmake/build/vfs_fonts';
import pdfMake from 'pdfmake/build/pdfmake.min.js';

console.log('this is printPDF')

function _myFunc() {

    var docDefinition = {
        content: [
            'First paragraph',
            'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines'
        ]
    };

    pdfMake.createPdf(docDefinition).download('test.pdf');
    console.log(docDefinition.content)

}

$("#pdf-trigger").on("click", _myFunc)

console.log(_myFunc)

index.html:

<!-- Button trigger PDF -->
        <button type="button" class="btn btn-secondary" 
          id="pdf-trigger" data-toggle="" 
          data-target="#pdfprint">PDF Print</button>

console.log:

log.js?1afd:24 - [HMR] Waiting for update signal from WDS...

printPDF.js?40b7:5 - this is printPDF

pdfmake.min.js?be6c:8 - Uncaught File 'Roboto-Regular.ttf' not found in virtual file system

client?56b6:85 - [WDS] Hot Module Replacement enabled.

Answer 1

Update:

As per GH user RizkiDPrast's suggestion, I went into vfs_fonts.js and edited the top line from: this.pdfMake = this.pdfMake || {}; this.pdfMake.vfs = { to: pdfMake = pdfMake || {}; pdfMake.vfs = {