How to load npm package(client side) properly


#1

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…


#2

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?


#3

try
import jspdf from ‘jsPDF’;


#4

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


#5

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'


#6

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.


#7

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?


#8

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


#9

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.


#10

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: