3rd Party JS Library - How to load


#1

OK, I’ve spent three hours figuring something out which would be ridiculously simple in plain old HTML. How do I add a 3rd party JS library to be used in a template (the library is not in NPM or Atmosphere). Please, I’ve tried everything I could find. It’s a client side form validation library, jquery.formance.js…


Can't load google charts properly manually
#2

If not using es2015 modules then add the the file to your lib folder and magically it’s in your project. If you ARE using modules, then make a lib folder inside you imports folder. Import the library as you would any other file in your project.


#3

Depending on your use case, you can also scope $.getScript to something like an onCreated, and host the js file somewhere.

Sounds quirky, but when you are looking at a seldom-used script that could be a sizable chunk of your payload, this may be a solution.


#4

Thank you for your responses. The solution that is working for me is placing the js file in public/js then using $.getScript in the template’s onCreated.


#5

The canonical (read Meteor Classic) way of doing this is to put the js files into the client/compatibility/ folder. This still works in Meteor today, but there can be issues with load order, especially with jquery plugins.


#6

lib folders actually have load priority just for this purpose. client/lib would be for client only libraries


#7

It’s true that files in lib/ are loaded first, but they are also loaded alphabetically, so you may still have to artificially prefix filenames to enforce load order.

However, the main purpose of client/compatibility/ is that files loaded from there are not wrapped in self-running functions, which ensures that local variables are exposed.