Meteor 18.0.2 with 3rd party library (no NPM package)

pgbalaji28 · 2019-04-01T03:37:38.567Z

I came here for help how to add the 3rd party libraries which doesn’t have any npm package to add. I have read some of the topics but no luck in achieving it. I have placed 3rd party lib js files inside client/compatibility or Client/lib/js but getting Object not defined (seems the files are not loaded properly).

Below is my code structure

Screen Shot 2019-04-01 at 2.14.56 pm.png3336×1714 561 KB

This is a sample html code snippet which I’m referring to achieve in meteor.

github.com

pgbalaji28/Scommstest/blob/master/SCGithub/test-smatcomms.html



	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/json2/20130526/json2.min.js"></script>
   
    <!-- <script type="text/javascript" src="https://192.168.0.4/smartcomms/data-capture/lib/data-capture-api.min.js" charset="utf-8"></script> -->
    <!-- <script type="text/javascript" src="https://smartcomms-dev.bbldtl.int/smartcomms/data-capture/lib/data-capture.min.js" charset="utf-8"></script> -->
    <script type="text/javascript" src="https://smartcomms-dev.bbldtl.int/smartcomms/data-capture/lib/api-common.min.js" charset="utf-8"></script> 
    <script type="text/javascript" src="lib/data-capture-api.min.js" charset="utf-8"></script>

<script type="text/javascript">
    var dataCaptureComponent;



    //Called on body load to initialize the data capture control
    function loadDataCapture() {

        dataCaptureComponent = new Thunderhead.DataCaptureComponent({
            //The Smart Communications server that hosts data capture
            'server': 'yourserver name',

This file has been truncated. show original

Please help and let me the approach i need to follow.

coagmano · 2019-04-01T04:35:18.309Z

The special folder client/compatibility doesn’t work if you are using the new entrypoint / lazy-loading semantics, which are turned on by default for new projects since 1.8

Check if your package.json file has a meteor section. If so, try deleting that section
That should pop you back into the older eager-loading + imports structure that a lot of the Meteor guide assumes.

pgbalaji28 · 2019-04-04T00:06:06.685Z

Thank you very much for helping this. That works well now.

I have another query, is the scripts can be referred from cdn lets say in case if the 3rd party is releasing patches or bug fix. So that application will be referring the latest one.

coagmano · 2019-04-04T00:18:17.348Z

If you’re using a script tag with a remote url, then yes it will always use the most up to date version available at that url.
If the url is versioned, then you will need to update the url when new versions are released

pgbalaji28 · 2019-04-04T00:33:13.108Z

Sorry, actually I’m copying the 3rd party js in the client/compatibility folder now.
If i want to use Script tag referring the cdn where it should be defined in the project, is that should be in main or head.html or it should be some other place.

coagmano · 2019-04-04T02:45:21.118Z

Wherever your <head> is

pgbalaji28 · 2019-04-05T12:14:07.792Z

Thanks a lot for your help

pgbalaji28 · 2019-04-10T10:54:47.904Z

@coagmano Need one more advise, I have added some server methods i.e under \server but those methods relied on the client/compatibility folder files. In this case i believe the server methods are loaded first and throwing undefined. Any options to overcome this issue?

coagmano · 2019-04-11T00:03:40.913Z

The answer to this depends on if / how the library is wrapped.

First of all, Meteor prevents files in a client folder from being loaded on the server, and vice-versa.
To allow it to be loaded on both, it needs to be outside these directories.

That means you lose the magic behaviour of the client/compatibility folder.
Meteor (and most bundlers) wrap each file in an IIFE (Immediately Invoked Function Expression), protecting the global scope from var declarations. Meteor doesn’t do this for the client/compatibility folder, so older libraries that rely on their variables escaping to the global scope can continue to do so.

If the library uses the UMD pattern, or attaches itself to window, then it doesn’t need to be in client/compatibility, and moving it should just work.

If not, you will need to edit it slightly to expose the module correctly

Give moving it a shot and if that doesn’t work, come back with a link to the library and I can take a look at how to expose it