How to load npm package(client side) properly

What is the right way to use npm package on the client side?
I want to use the npm package of jsPDF.

I downloaded the package using meteor npm install --save jspdf
And on my client js(using angular 1) i import it

import jsPDF from 'jspdf'

It seems that it does load the module but when i try to use it(using new jsPDF())
I get an error…

1 Like

Today I asked very similar question: How to use client side npm libraries with meteor 1.3?
I think it a little bit unclear how to do it and I have spent quite some time trying various things. Try jsPDF = require(‘jspdf’) and then check if it works. Whats the error btw?

try
import jspdf from ‘jsPDF’;

The error i’m getting is:
TypeError: _jsPDF2.default is not a constructor

Because it should have a constructor when i console log the object i do not see it

Did you figure out how to use it? I am having the same problem with another npm package, Pondjs.

It has the same behaviour as jspdf.

Doing import 'jspdf'; or import 'pondjs'; gives no errors, but doesn’t allow me to use the packages. Importing it as

import * as pond from 'pondjs';
import * as jsPDF from 'jspdf';
import jsPDF from 'jspdf';

results in the error Cannot find module 'pondjs'
and: Cannot find module 'jspdf'

According to the link you provided, this uses ES6 import/export syntax and gives examples:

import { Index, TimeSeries } from "pondjs";

So, you just import the structures you are using in your code (note the {} syntax. The various structures are listed down the left of the page you linked to.

Unfortunately, that results in the same error Cannot find module 'pondjs'

Probably because the npm package is distributed already compiled to ES5, losing the module syntax?

That’s pretty standard behaviour. How are you installing the npm package into your project?

I installed it with:

npm install pondjs --save

Other packages are working, but those are mainly typescript packages with *.js, *.d.ts and *.js.map files.

Interestingly,

import { Index, TimeSeries } from "pondjs";

Does actually work. The compiler does complain on both client and server, but the example code works. Guess I shouldn’t always trust the compiler :sweat_smile: