External Jquery libraries loaded but it not works first time after 1.3 update

1

Hi,

we use theme from external vendor that have many jquery libraries and css files which i included in “head.html” file. It works perfectly before the meteor 1.3 but after the 1.3 update it is not working at very first time.Suppose we navigate to other screen and return back it works fine. What went wrong?. How could find solution. Please help me.

Thanks & Regards,
Ramesh.

2

Can you share some of your code to help us troubleshoot? Maybe create the smallest reproduction possible showing the issue, and post some of those code fragments (or post it all via github, etc.). Anything you can show helps.

3

Thanks for your reply willson i attached the .zip in github please take a look
Sample

Thanks & Regards,
Ramesh

4

You’re running into load order issues. Your theme referenced JS files are attempting to load before Meteor’s included jQuery dependency itself is loaded. You will want to convert your external theme layout around a bit to accommodate Meteor’s load order guidelines. Here is a quick example of how you can do this:

  1. Copy the JS files you want to use from /public/slicklab/js into /client/compatibility/slicklab/js. This will make sure these files are loaded after jQuery has been loaded by Meteor. Based on your head.html, you will want to copy the following over:

  1. Rename /client/compatibility/slicklab/js/switchery/switchery.js to /client/compatibility/slicklab/js/switchery/1_switchery.js. This is because we need the core switchery.js file to load before the switchery-init.js file, since it depends on Switchery being defined.

  2. Rename /client/compatibility/slicklab/js/slidebars.min.js to /client/compatibility/slicklab/js/1_slidebars.min.js. This is because we need slidebars to load before it’s referenced in the scripts.js file.

  3. Remove all <script/> references from your head.html. So remove:

<script src="/slicklab/js/jquery-migrate.js"></script>
<script src="/slicklab/js/modernizr.min.js"></script>
<script src="/slicklab/js/jquery.nicescroll.js" type="text/javascript"></script>
<script src="/slicklab/js/slidebars.min.js"></script>
<script src="/slicklab/js/switchery/switchery.min.js"></script>
<script src="/slicklab/js/switchery/switchery-init.js"></script>
<script src="/slicklab/js/jquery-easy-pie-chart/jquery.easy-pie-chart.js"></script>
<script src="/slicklab/js/scripts.js"></script>

For more information about why the above fixes your issues, see the Default file load order section of the Guide.

1 Like
5

Thanks for your reply hwillson. Now It works. May i know how the same structure works in meteor 1.2.

Thanks & Regards,
Ramesh.

6

A lot has changed internally with Meteor 1.3, especially around load order (with the addition of ES2015 module support). Something has changed that affects your project, but that being said leveraging the /client/compatibility folder for third party scripts that rely on globals is still the recommended approach for 1.2 based projects.

Now that Meteor supports modules and npm, you can probably switch this all around to leverage npm based packages and Meteor’s ES2015 module support (but since you’re integrating a third party theme making those changes might not be worth the effort).