Jspdf: WebPack/TypeScript: jspdf_1.default is not a constructor

[matb]

I am using jsPdf in the version that is currently published via NPM in an Angular2 app written in Typescript.

We have the following code:

import jsPDF from 'jspdf'; // this imports jspdf.debug.js
var doc = new jsPDF(); // this throws an exception
doc.text('Hello world!', 10, 10)
doc.save('a4.pdf')

When executing this we are getting the following exception: jspdf_1.default is not a constructor. I can work around the issue by patching the jsPdf.debug file as described here: https://github.com/MrRio/jsPDF/issues/582 and additionally adding this line:
jsPDF.default = jsPDF;

In addition I tried the latest files in the dist folder of the master branch. With those files, I need to add this line at the end of jspdf.debug.js:

 })(typeof self !== "undefined" && self || typeof window !== "undefined" && window || undefined);
  jsPDF.default = jsPDF; // new
  return jsPDF;

Is there any workaround without changing the files in the node_modules folder?

[matb]

I added the fixes that solved the issue for me here: https://github.com/matb/jsPDF

But since I cannot run npm run build without errors, I can't submit a PR.

[MrRio]

What are the build errors?

On Thu, 24 Nov 2016 at 12:57 Matthias Baumann [e-mail]
wrote:

I added the fixes that solved the issue for me here:
https://github.com/matb/jsPDF

But since I cannot run npm run build without errors, I can't submit a PR.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/MrRio/jsPDF/issues/956#issuecomment-262770562, or mute
the thread
https://github.com/notifications/unsubscribe-auth/AAC5swU8jtmNorfrJIq-nlbynRBcw4OUks5rBYnIgaJpZM4K7k3O
.

>

James Hall
Director
Parallax Agency Ltd
M. 07894950320

[matb]

{ Error: Error transforming C:\src\jsPDF\main.js with 'babel' plugin: It looks like your Babel configuration specifies a module transformer. Please disable it. If you're using the "es2015" preset, consider using "es2015-rollup" instead. See https://github.com/rollup/rollup-plugin-babel#configuring-babel for more information
    at preflightCheck (C:\src\jsPDF\node_modules\rollup-plugin-babel\dist\rollup-plugin-babel.cjs.js:43:102)
    at Object.transform$1 [as transform] (C:\src\jsPDF\node_modules\rollup-plugin-babel\dist\rollup-plugin-babel.cjs.js:104:18)
    at C:\src\jsPDF\node_modules\rollup\dist\rollup.js:8303:35
    at process._tickCallback (internal/process/next_tick.js:103:7)
    at Module.runMain (module.js:592:11)
    at run (bootstrap_node.js:394:7)
    at startup (bootstrap_node.js:149:9)
    at bootstrap_node.js:509:3
  rollupTransform: true,
  id: 'C:\\src\\jsPDF\\main.js',
  plugin: 'babel' }

I am running this on a Windows machine.

[kevin-madhu]

I have the same problem too.

[jdockter]

I have the same problem. Is there any fix?

[Uzlopak]

What problem do you have exactly? the babel or the default-thing?

[jdockter]

I'm getting the same error, 'jspdf_1.default is not a constructor', under the same conditions, using jsPdf version 1.3.5 currently published via NPM with Angular app written in Typescript. I have cleared my node_modules to make sure I'm pulling the latest but error is still there.

[Uzlopak]

Can you open jspdf.debug.js and replace

module.exports = jsPDF;
with
module.exports.jsPDF = jsPDF;

And then test it again if it works with the modified jspdf.debug.js

[jdockter]

Unfortunately that did not help, getting the same error, 'TypeError: jspdf_1.default is not a constructor'

[s00500]

import * as jsPDF from 'jspdf'; works for me

[jdockter]

Thanks @s00500 looks like that did the trick for our code.

[Tonemnguyen]

Still having this issue when running npm run build.

[Tonemnguyen]

https://github.com/Gbuomprisco/ngx-chips/issues/69 was the solution that fixed it for me!

[Uzlopak]

Is it possible to detect angularJS/webpack/typescript?

[jimfilippou]

@s00500 thanks!!!

[marouaneterai]

@s00500 Thanks

[Uzlopak]

Seems been solved and part of readme https://github.com/MrRio/jsPDF#angular-configuration

[jca38]

Hi,
I use jspdf version 1.4.0 in a SharePoint Online React SPFX solution.
I get an error TypeError: o is not a constructor

How to solve this problem ?
Thanks for your help
Best Regards,
Jean-Christophe AUDARD

[marouaneterai]

Hi,
I think that you have a wrong import of jsPDF, do you try to import it like this:
import * as jsPDF from 'jspdf';

[jca38]

Hi,
When I try import jsPDF from "jspdf" I have the error "module jspdf has no default export"

[jca38]

and when I try import * as jsPDF from 'jspdf' I have no error until I call the jsPDF constructor in my code:
var pdf = new jsPDF('p', 'pt', 'letter');

This produces a javascript error in my page 'o is not a constructor'

[jca38]

Hi,

When I try import jsPDF from "jspdf" I have the error "module jspdf has no default export" in typescript compilation.

and when I try import * as jsPDF from 'jspdf' I have no error, until I call the jsPDF constructor in my code:
var pdf = new jsPDF('p', 'pt', 'letter');

This produces a javascript error in my web page 'o is not a constructor'

Thanks for your help,

Jean-Christophe

---

De : Marouane Terai [e-mail]
Envoyé : mercredi 6 juin 2018 09:14
À : MrRio/jsPDF
Cc : jca38; Comment
Objet : Re: [MrRio/jsPDF] WebPack/TypeScript: jspdf_1.default is not a constructor (#956)

Hi,
I think that you have a wrong import of jsPDF, do you try to import it like this:
import jsPDF from "jspdf";

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHubhttps://github.com/MrRio/jsPDF/issues/956#issuecomment-394965393, or mute the threadhttps://github.com/notifications/unsubscribe-auth/Al2qGr1Nsu140-7gDgEg4qHUZOL41QgPks5t54FcgaJpZM4K7k3O.

[marouaneterai]

this how i initialized my pdf:
var pdf = new jsPDF("A4");

and then you can find how to add texts and set font size in the official documentation

[jca38]

Thanks but not working for us as we have a conflit with the SharePoint Online Framework (SPFX)

[CassianoSF]

Same for me:

import * as jsPDF from 'jspdf'
var doc = new jsPDF({
          orientation: 'landscape',
          unit: 'in',
          format: [4, 2]
        })

jsPDF is not a constructor

[CassianoSF]

Nevermind...
import jsPDF from 'jspdf'

worked with create-react-app

[nboisteault]

In my case I had issue lazy loading jsPDF with webpack :

import(/* webpackChunkName: "jspdf" */ 'jspdf').then(jsPDF => {
// Without lazy loading : 
var pdf = new jsPDF('landscape', 'mm', format);
// Now with lazy loading :
var pdf = new jsPDF.default('landscape', 'mm', format);
});

[Uzlopak]

@nboisteault
Is this an issue we have to solve?

[nboisteault]

@arasabbasi : I'm not sure as it is wrote in webpack doc :

Note that when using import() on ES6 modules you must reference the .default property as it's the actual module object that will be returned when the promise is resolved.

[dannywolfmx]

I could solve the problem perform the following import in typescript

import '../../node_modules/jspdf/dist/jspdf.debug.js';

[AlbertoNava0307]

I am trying to create a function to generate PDF from it, in my component I have the following code:

var doc = genPdfOrden(municipio, fecha, usuario, folio, detalle, total, this.$jsPDF, this.$JsBarcode);

and my function is this:

function genPdfOrden(municipio, fecha, usuario, folio, detalle, total, jsPDF, JsBarcode){
var doc = new jsPDF({
orientation: 'portrait',
unit: 'mm',
format: [210, 48]
})
doc.setFontSize(9);
var splitTitle = doc.splitTextToSize("MUNICIPIO DE "+municipio, 46);
doc.text(splitTitle, 2, 5)
doc.text(fecha, 2, 13)
doc.text("EMITIDO POR:", 2, 18)
doc.text(usuario, 2, 23)

JsBarcode("#barcode", folio, {
            format: "CODE128",
            width: 1.4,
            height: 150
            });
var canvas = document.getElementById('barcode');
var jpegUrl = canvas.toDataURL("image/jpeg");
doc.addImage(jpegUrl, 'JPEG', 0, 25);

var splitTitle2 = doc.splitTextToSize(detalle, 46);
doc.text(splitTitle2, 2, 80)
doc.setFontSize(12);
doc.text("TOTAL A PAGAR:", 2, 125)
doc.text("$"+total, 2, 130)
return doc;

}

but I get the error "jsPDF is not a constructor", has something similar happened to you?

[nboisteault]

@AlbertoNava0307 Try :
new jsPDF.default();

[borisBelloc]

I was using import { jsPDF } from 'jspdf';

and had the error message :

ERROR TypeError: jspdf__WEBPACK_IMPORTED_MODULE_3__.jsPDF is not a constructor

Changing the import to : import * as jsPDF from 'jspdf';

Fixed the error for me 👍

[RicardoMTT]

importar * como jsPDF desde 'jspdf'; funciona para mi

that work for me..Thanks

[Vicky310]

and when I try import * as jsPDF from 'jspdf' I have no error until I call the jsPDF constructor in my code:
var pdf = new jsPDF('p', 'pt', 'letter');

This produces a javascript error in my page 'o is not a constructor'

Did you find an answer? I'm facing the same issue and 'import * as jsPDF from 'jspdf' didn't work for me. I'm using React

[HackbrettXXX]

With [email protected] you can use import { jsPDF } from 'jspdf'. This should work.

[FredericKirchhoff]

const { jsPDF } = require("jspdf");

methods: {
download() {
let pdfName = 'test';
var doc = new jsPDF();
doc.text("Hello World", 10, 10);
doc.save(pdfName + '.pdf');
}

finally worked for me in Vue

[ravi2357]

@AlbertoNava0307 Try :
new jsPDF.default();

Thanks it works