Jspdf-autotable: Uncaught ReferenceError: jsPDF is not defined

[cyberco]

I've installed jsPDF (v0.91) and jspdf-autotable using NPM. This is my package.json:

 "dependencies": {
    "jspdf": "git://github.com/pavestru/jsPDF.git#v0.9.1",
    "jspdf-autotable": "^2.0.22",
  }

I'm using a specific old version of jsPDF since the latest versions don't work with NPM (see here for details).

The output of npm install with that package.json gives:

├── [email protected] (git://github.com/pavestru/jsPDF.git#217c44d40cef6c5d567aa6db8e2f0d548e89c387)
└─┬ [email protected]
  └── [email protected]

It looks as if jspdf-autotable installed its own version of jspdf (v1.2.61). Is that correct? Anyhow, my code (livescript):

jsPDF = require 'jspdf'
pdf = new jsPDF()
pdf.autoTable(columns, rows)

But after bundling everything using webpack and running my application I get:

jspdf.plugin.autotable.js:10 Uncaught ReferenceError: jsPDF is not defined. @jspdf.plugin.autotable.js:10

What am I doing wrong or is there something wrong with jspdf-autotable?

[simonbengtsson]

This seems to be an issue with how the code gets bundled. Can you share your webpack config? Can you also check that the dist files generated by webpack looks okey, ie that jspdf is included before jspdf-autotable. To narrow it down to the bundling, can you make sure that the issue is still there if you test without livescript?

[cyberco]

jsPDF comes before jspdf-autotable in the bundle.
webpack.config is (it's livescript, but it's easy to understand):

pkg = require './package.json'

module.exports = do
    entry: do
        app:
            './app.ls'
        vendors: Object.keys(pkg.dependencies) # loads all npm packages from package.json
    output: do
        filename: '[name].js'
...

And in package.json:

  "dependencies": {
    "jspdf": "git://github.com/pavestru/jsPDF.git#v0.9.1",
    "jspdf-autotable": "^2.0.22",
  }

I'm not sure how to test without LiveScript. Trying to compile the individual LiveScript file gives:

Failed at: app.ls
ReferenceError: window is not defined
    at /app/node_modules/jspdf/dist/jspdf.amd.min.js:55:445
    at /app/node_modules/jspdf/dist/jspdf.amd.min.js:59:119
    at Object.<anonymous> (/app/node_modules/jspdf/dist/jspdf.amd.min.js:151:36)
    at Module._compile (module.js:425:26)
    at Object.Module._extensions..js (module.js:432:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:311:12)
    at Module.require (module.js:366:17)
    at require (module.js:385:17)
    at Object.<anonymous> (/app/scripts/app.ls:4:9)

I'm still not clear where the issue is, but the output from npm install above seems incorrect.

[cyberco]

Oh, and I forgot to mention that jsPDF (v0.9.1) by itself works perfectly fine, it's just that jspdf-autotable is not loaded as a plugin.

[simonbengtsson]

I thought I supported amd modules with the plugin. Seems like I was wrong. I added support now in version 2.0.23 though. Could you try it and see if it works for you? I also relaxed the version dependency on jspdf so you should not get two versions of jspdf anymore.

[cyberco]

Thx for the quick reply. There are indeed no longer two versions of jspdf required for autotable, but at startup I still get:

jspdf.plugin.autotable.js:10 Uncaught ReferenceError: jsPDF is not defined. jspdf.plugin.autotable.js:10

And when trying to use autotable I still get:

this.pdf.autoTable is not a function

[cyberco]

By the way, I'm not sure whether webpack uses commonjs or amd, neither what the exact difference is.

[cyberco]

Hmm...somehow the following function does not raise the this.pdf.autoTable is not a function error when it's called for the first time, but every time after that:

    render_pdf: ~>
        pdf = new jsPDF()
        pdf.autoTable ["A", "B"], [['a', 'ha'], ['b', 'dee']]

At load this is still an issue:
jspdf.plugin.autotable.js:10 Uncaught ReferenceError: jsPDF is not defined. jspdf.plugin.autotable.js:10

[simonbengtsson]

Released a new version now 2.0.24 which I have tested works with webpack and version 0.9.1 and 0.9.2 of jspdf. I tested by running webpack app.js bundle.js with the following code:

// app.js
var jsPDF = require('jspdf');
require('jspdf-autotable');

var doc = new jsPDF('p', 'pt');

var columns = ["ID", "Name", "Age", "City"];
var data = [
    [1, "Jonatan", 25, "Gothenburg"],
    [2, "Simon", 23, "Gothenburg"],
    [3, "Hanna", 21, "Stockholm"]
];

doc.autoTable(columns, data);
doc.save("table.pdf");

I realize that this is not the webpack config you used, but at least there should be now issues with jspdf-autotable anymore. The way you are loading npm packages from package.json looks kind of like a hack to me? You might want to look into code splitting instead of manually splitting into vendor and app bundles?

[cyberco]

Thx, @simonbengtsson ! Version 2.0.24 works with me as well. Great work and thanks for the quick reply.
I haven't spent too much time on they way we bundle our code. I'll have a look into code splitting.

[simonbengtsson]

Cool, thanks for letting me know of the issue!

[BhuvaneswariVajravel]

i have faced the same
issue it shows jsPdf is undefined
my jspdf version is 1.3.5
and auto-table is 2.0.24

[iulianp1002]

with latest jsPDF and jspdf-autotable is not working.what is the right way to use it?
i tried with require(var jsPDF = require('jspdf');
require('jspdf-autotable');),
i tried also with import like this
import 'jspdf'
import 'jspdf-autotable'
declare let jsPDF;
.i am working with an angular 7 application and either i get doc.autotable is not a function or jsPDF is not a function. so i cannot work with this library.is a problem with the jspdf-autotable as plugin,not with jsPDF (this one is working if i install via npm with @types/jspdf too).
"jspdf": "^1.5.3",
"jspdf-autotable": "^3.1.1",

[ernestocasanova]

I'm using jsPDF in Angular 8 with autotable, in this view requires custom the Table in DOM, and I tried all options possible...

Versions:
"jspdf": "^1.5.3",
"jspdf-autotable": "^3.2.4",

Any solution?