Update:
The problem occurred again and gave me a chance to check a few more things. The script is loaded and the contents can be viewed in Chrome's developer tools under the "Sources" panel.
This means that it is being loaded, but it is not being executed.
jQuery is available on that page publicly and I was trying to pass it through as a dependency into the call back as jQuery
Since the function is anonymous - there should be no conflict here - no?
My proof is that this works and logs the response from the ajax query. Is requireJs refusing to use it with that name since the global variable already exists for that parameter? jQuery.ajax('/', function(jQuery) { console.log(jQuery); });
Original Post:
It is very important that I understand why this is happening and how to get around it.
I am avoiding the use of the $ sign for jQuery everywhere in my scripts and loading all of them through requirejs.
There are many buttons that have event listeners attached to them that work nearly all of the time - however sometimes when the page loads the events do not fire or may never be binded to the elements.
I don't know if it's a requirejs problem or jquery conflict. Has anyone else dealt with this yet?
Config:
var config = {
map: {
'*': {
footerContact: 'Module_Contact/js/contact',
}
}
};
Script (contact.js)
define([
"jquery",
], function(jquery){
"use strict";
jquery('.element').on('click', function(event) {
});
});
phtml include:
<script type="text/javascript">
require(['footerContact']);
</script>
Edit:
I am not convinced it is a requirejs shim issue, reading the documentation it states the criteria for using shim config:
Ideally the scripts you load will be modules that are defined by calling define(). However, you may need to use some traditional/legacy "browser globals" scripts that do not express their dependencies via define(). For those, you can use the shim config. To properly express their dependencies.
Yet my script uses define to include its dependencies...