How to handle jquery conflicts within Meteor packages?


#1

Both x-editable and froala packages create identical jQuery methods - $.fn.editable.
So froala overwrites x-editable.
Here is what I found on stackoverflow:

  <script src="../js/froala_editor.min.js"></script>
  <script>$.fn.froala_editor = $.fn.editable.noConflict();</script>

  <!-- Load X-Editable js files here. -->

  <script>
      $(function(){
          $('#edit').froala_editor({inlineMode: false})
      });
  </script>

How to make it work with Meteor?
I have an idea to create a froala-alias package which will use original one.
Within this package I’m gonna write. Does that make sense?

$.fn.froala_editor = $.fn.editable.noConflict();

#2

Yeah, looks like the method you came up with would work and is the best you can do without modifying one of the packages you are using.

Unfortunately this is a side effect of packages attaching things to a global object, as is the norm with JQuery plugins. Possibly a good pattern would be to have JQuery plugin packages also export a no-conflict version of their function.


#3

Yep that works.
https://atmospherejs.com/praxie/froala-no-conflict