TypeError: c.autoTable is not a function

[chun222]

hello,你好！ it can works in vue3 dev env. but when i build it ，it can not works in product env.

"jspdf": "^2.5.0",
"jspdf-autotable": "^3.5.23",

import jsPDF from "jspdf";
 import "jspdf-autotable";
 const print = async () => {
      const PageMargin = { top: 20, right: 10, bottom: 15, left: 10 };
      const doc = new jsPDF({
        orientation: "p",
        unit: "mm",
        format: "a4",
      });
await something .......
 doc.autoTable({
          styles: { font: "hansans-normal" },
          columnStyles: { europe: { halign: "center" } }, // European countries centered
          body: state.datasource,
          columns: state.pdfheader,
          startY: startY, //第一次
          margin: PageMargin,
        });
}

TypeError: c.autoTable is not a function

[chun222]

help me 55555555

[KoblerS]

try to use it like this:

(doc as any).autoTable({

https://codezup.com/angular-9-10-export-table-data-to-pdf-using-jspdf/

[andreasbhansen]

Probably a duplicate of #857?

[micksp]

Probably a duplicate of #857?

very likely, yes

[FPG-Alan]

I had meet the same problem today, and I use Vite which use rollup-commonjs-plugin to convert commonjs module to ESM during build.

After looking into dist code, I found somehow commonjs plugin did not convert require("jspdf"):

...
module.exports = e(function() {
      try {
        return require("jspdf");
      } catch (t4) {
      }
    }());
...

which should be something like this:

var require$$0 = /* @__PURE__ */ getAugmentedNamespace(jspdf_es_min);
...
...
module.exports = e(function() {
      try {
        return require$$0;
      } catch (t4) {
      }
    }());

since autotabe need apply itself as plugin to jspdf, this is the immediate cause of the problem.

After further investigation, I found in Vite version 2.6.3, they upgrade commonjs plugin to version 21.0.0 upgrade to @rollup/plugin-commonjs 21.x and what happened in commonjs plugin to version 21.0.0?

they set ignoreTryCatch default as true use safe default value for ignoreTryCatch

and, this repo, use try catch when require jspdf

So, in conclusion, to solve this problem, explicitly set ignoreTryCatch to false:

defineConfig({
...
  build: {
    commonjsOptions: {
      ignoreTryCatch: false
    }
  }
  ...
})

[simonbengtsson]

Great research into this. The best solution here would likely to start shipping a separate esm version of the library which would not require the require call.

[vstiebe]

For the record to anyone coming from Angular 13 and PrimeNG Table demo. Trying to use this versions:

• "jspdf": "2.5.1";
• "jspdf-autotable": "3.5.24";

I've solved this issue with the following code:

import * as jsPDF from 'jspdf';
import 'jspdf-autotable';
...
  exportPdf() {
    const doc = new jsPDF.default();
    (doc as any).autoTable({columns: this.exportColumns, body: this.data});
    doc.save('data.pdf');
  }

[navinrangar]

try to use it like this:

(doc as any).autoTable({

https://codezup.com/angular-9-10-export-table-data-to-pdf-using-jspdf/

it worked for me thanks

[vzakharov-rxnt]

@vstiebe This should give you console errors, the syntax is deprecated in the latest version of autotable.

[kehwar]

In order to use this on Nuxt (serverside) I'm using this facade

import { jsPDF as _jsPDF } from "jspdf";
import autoTable from "jspdf-autotable";
import type { jsPDFOptions } from "jspdf";
import type { UserOptions } from "jspdf-autotable";

interface jsPDF extends _jsPDF {
    autoTable: (options: UserOptions) => void
}

function buildPDF (options?: jsPDFOptions) {
    const doc : Partial<jsPDF> = new _jsPDF(options);
    doc.autoTable = (options: UserOptions) => {
        (autoTable as any).default(doc, options); // Why is this necessary?
    };
    return doc as jsPDF;
}

export { buildPDF };

I tried all other options in this thread and none worked for me

[DrChhun]

make sure you have install it. ( yarn add jspdf-autotable or npm install jspdf-autotable) after i install it worked