Recommended way of using 3rd party javascript libraries

I’m trying to use a javascript library and I can’t figure out how to make it work with a Meteor template. I took the example code from here: app.js and put it into client/compatibility then I put the cdn script tag in the main.html file but I get the error Cannot read property 'querySelector' of null. I thought it was just supposed to work but I’m probably missing something, eventually I gave up on this method.

So then I just npm installed the library instead and imported it like this: import {signaturePad} from 'signature_pad'; but I don’t know where to put the global initialization variables that are in app.js. I tried putting them in Template.tester_admin.onCreated but then I can’t use the variables in the Template.tester_admin.events. It seems if I want to do it the npm way I have to restructure the app.js code to make it work with Meteor but not sure how to best go about it.

To make this work I had to put the actual library code into the client/compatibility folder and then in main.js I put the the app.js code in Template.tester_admin.onRendered and it started to work.

Still no idea how the alternative npm way of loading this code would work using import {signaturePad} from 'signature_pad'; but at least I got this working.

I got it to work with the npm package like so

import SignaturePad from 'signature_pad/dist/signature_pad.min.js';

Template.signaturePad.onRendered(function(){
  const instance = this;
  const canvas = instance.find('#signaturePad');
  if(canvas)
    instance.sp = new SignaturePad(canvas);
});
1 Like