StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PORequire.JS + JQuery Plugins + Customer hosted JQuery conflict
text
Body
copied!<p>We've built a platform similar to shopify in which we host customer webpages for eCommerce.</p> <p>On each page we have some platform javascript which is loaded via requireJS.</p> <p>This platform javascript uses jquery Cookie as a plugin.</p> <p>If the customer also installs jQuery it can cause the Cookie plugin to install itself to the customers instance of jQuery rather than our instance of jQuery.</p> <p>customer html:</p> <pre><code><script type="text/javascript" src="/jquery.js"></script> </code></pre> <p>app.js [our code]:</p> <pre><code>require.config({ "paths": { "jquery": "bower_components/jquery/jquery.min", "jquery-cookie": "bower_components/jquery-cookie/jquery.cookie", }, "shim": { "jquery-cookie": ["jquery"] } }); </code></pre> <p>platform.js [our code]:</p> <pre><code>define(['jquery', 'jquerye-cookie'], function(jQuery, jQueryCookie) { console.dir(jQuery.cookie); // <-- Not available, sometimes }); </code></pre> <p>You can see at the console.dir sometimes jQuery.cookie will not be available, it is because jQuery cookie installs itself into the global $ which may be the customer's version of jQuery or ours.</p> <p>The only fix I really have is using the compiled version of our platform js at all times. In production this is fine, since our code is compiled together and includes our jQuery dependency our code the execution order is deterministic and at load-time jQuery cookie installs into the correct jQuery object.</p> <p>The problem is in development this is a PITA to only work on the compiled version of our platform js. Just the compilation time alone slows us down quite a bit.</p> <p>I'm debating trying to remove all jQuery dependency in our platform JS. I don't want to do that since I'd lose parsley as well. Is there a better solution to avoid this problem?</p> <p>Update:</p> <p>noconflict mode won't work because the way jquery cookie (and other jquery plugins) work is:</p> <pre><code>(function ($, document, undefined) { $.cookie = function (key, value, options) { }); })(jQuery, document); </code></pre> <p>So as you can see even if I re-namespace our jQuery to something like "platform$", the plugin will still load itself into the window.jQuery, which will either be undefined or the customer's version of jQuery.</p> <p>Edit:</p> <p>To be clear this is not "a" customer, it is many (eventually thousands, hopefully).</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload