We Keep Coding

Magento 2: moment is not defined

I'm trying to use the Shipping Time JS plugin on my Magento 2 website, it requires both moment.js and jQuery in order to work however it's not working. I'm getting a ReferenceError: moment is not defined in shiptime.js on line 49 which is the following:
try {
if (moment === undefined || $ === undefined ) throw Error("please include jquery & moment.js");
} catch (e) {
console.log(e);
}
==============
My require.js
This is what my requirejs-config.js looks like, it's sitting in app/design/frontend/##/##/requirejs-config.js:
var config = { // eslint-disable-line no-unused-vars
packages: [{
name: 'momentjs',
location: 'js/',
main: 'moment'
}],
map: {
'*': {
'menu': 'Magento_Theme/js/disable-menu',
'shippingtime': 'js/shiptime'
}
},
shim: {
'momentjs': {
deps: ['jquery']
},
'shippingtime': {
deps: ['jquery',',momentjs']
}
}
};
jQuery is loaded elsewhere and is definitely being loaded (I have various other jQuery libraries which are all working).
==============
Debugging
I initially thought the moment.js/shiptime.js files weren't being loaded in however they are when I check both the source and the network panel. To further test this, I did the following to see if moment.js would output anything:
require(['momentjs'], function (moment) {
console.log(moment().format('LLLL'));
});
This does output the date in the console so moment.js is definitely loading, this is my code for the shiptime.js file which isn't working and gives me the error I mentioned above:
require(['jquery', 'shippingtime', 'momentjs'], function (moment) {
jQuery(document).ready(function () {
jQuery(function($) {
jQuery('.shipping-time').shipTime();
});
});
});
Any advice would be greatly appreciated!

It's been a while since I've worked with requirejs but since no one smarter has chimed in yet I'm happy to help you keep troubleshooting. Using jQuery with requirejs can be tricky, especially with a large and complex platform like Magento.
Without being able to see all of your code I would consider and investigate the following:
Are you initializing jQuery properly in a no-conflict way if necessary
Are you using require() vs. define() where and as intended
Are you versed in the challenges unique to Magento when using requirejs
Have you reviewed and followed the recommendations regarding the complexities of using moment with requirejs
Here is some corresponding reading on each:
On No-Conflict
require() vs define() plus other good insights
On Magento 2 with RequireJS
On complexities of Moment and RequireJS
https://momentjs.com/docs/#/use-it/require-js/
https://github.com/requirejs/requirejs/issues/1554#issuecomment-226269905
One last thing to try:
In your final code example you pass moment to the function but not jQuery. Have you tried something along these lines:
require(['jquery', 'momentjs', 'shippingtime'], function($, moment) {
$(document).ready(function() {
$('.shipping-time').shipTime();
});
});

kendoButton is not a function, although Kendo is loaded

I use RequireJS to load Kendo according to this and it works. jQuery is loaded first, then Kendo. But I got an error "kendoButton is not a function". Here is my app.js
require.config({
paths: {
"jquery": "lib/kendo-ui/jquery.min",
"jquery-ui": "lib/jquery-ui.min",
"kendo-ui": "lib/kendo-ui" // this is a directory containing all Kendo files
},
shim: {
"kendo-ui/kendo.button.min": {
deps: ["jquery"]
},
"kendo-ui/kendo.core.min": {
deps: ["jquery"]
}
}
});
require(["jquery", "kendo-ui/kendo.core.min", "kendo-ui/kendo.button.min"],
function ($)
{
$("#primaryTextButton").kendoButton();
});
Kendo troubleshooting says that jQuery should be included just once (yes, I have) and all the required Kendo files are included (yes, I included kendo.core.min.js).
I use RequireJS 2.2.0, Kendo 2016.1.226, and jQuery version, which is included in the Kendo package. Can someone point out what's wrong?

Set the baseURL to "js/kendo".
I'm not sure if this has been stated clearly in the documentation. I thought the URL in this example is well, an example, but it turns out to be important.

Backbone.js + require.js : Wait until file is loaded

I'm using backbone.js and require.js. I have a script with files dependencies but the problem is that a file is not loaded before executing my script. So, a function is not defined. Here is the code exemple :
define([
'jquery',
'jqueryUi',
'holder',
'knob',
'jquery.ui.widget',
'iframeTransport',
'fileupload',
'knobScript',
], function($, ui, Holder) {
$(document).ready(function() {
$('#upload').fileupload({...}); // This one is unedefined because the script from the file fileupload is not completely loaded
});
});
Is someone has a solution to be sure that the script fileuplaod called in define is fully loaded before executing the script with the function (functionFromFileupload) ?
Thank for your help

To complement Evgeniy's comment: The problem is not that fileupload is loaded after your function. It will be loaded before running your function, that is the contract of Require. (If you can confirm it doesn't, then it would probably be a misconfiguration or less probably a bug of Require.)
Most probably the problem is that, sometimes, fileupload may be loaded before jQuery. Thus, it does not find the jQuery object to plug to and $(...).fileupload(...) fails. Use shim in the Require configuration, e.g. as:
require.config({
...
shim: {
fileupload: {
deps: ["jquery"]
}
...
}
...
});
You will probably have to shim other things too, e.g. jQueryUI.

Scripts Dependencies Using RequireJS Shim

I'm upgrading from jQuery 1.8 to 1.9 and since jQuery.browser() is removed, I will use jQuery Browser Plugin.
My requirejs config file (loaded using data-main="") looks somewhat like this:
(EDITED - added more code snippets)
main-comp.js
require.config({
paths: {
jquery: 'libs/jquery/jquery1.9.1.min',
utils: 'modules/utils',
myController: "controllers/myController",
browserPlugin: 'libs/jquery/jquery.browser.min'
},
shim: {
browserPlugin: {
deps: ['jquery']
}
}
});
require(['myController', 'jquery'], function (controller, $) {
$(controller.start);
}
);
moduls/utils.js
define(['browserPlugin'], function () {
return {
browser: $.browser
};
});
myController.js
define(['utils'], function (utils) {
function start() {
console.log(utils.browser.msie)
}
return {
start: start
};
});
Everything seemed to work properly, but then I saw that sometimes in IE only I get a 'jQuery' is undefined (it's a capital Q there) or '$' is undefined errors from the jquery.browser.min.js file.
I thought the deps means that jquery will load before the jquery.browser file but apparently this isn't always the case. I tried following this answer and add exports: "$.fn.browser" but with no success.
When running an optimized version (minify+uglify using r.js) I haven't encountered it.
What am I doing wrong?

You need to ensure you reference $ as a parameter in the require callback. Like so:
require(['myController', 'jquery'], function (controller, $) {
$(controller.start);
}
);
This ensures that jQuery is available to use. It is a bit of an odd one as it will expose itself globally anyway so it will sometimes work regardless, but the correct way is to explicitly require it and use it inside the callback as a parameter.

It looks like you are missing jquery dependency in moduls/utils.js, please try:
define(['jquery', 'browserPlugin'], function ($) {
return {
browser: $.browser
};
});
and also, just to be on the safe side, add jquery to your shim :
jquery: {
exports: "$"
},
By the way, why don't you use $.browser in your code and just load the jquery plugin using the shim configuration?

I had the same problem, the script in data-main is loading asynchronously, that means that it may load after the scripts it defines.
The solution is to load another script with the require.config right after the require.js script.
data-main Entry Point Documentation.

Require JS still not loading shim content in order

I maybe doing something obviously wrong here, this is the code i have and i keep getting an error saying _Packery is undefined and i presume that is because it is loading before jQuery.
I have looked at the docs but i couldn't see why it isn't working correctly.
require.config({
urlArgs: "ts="+new Date().getTime(), // disable caching - remove in production
paths: {
jquery: [
"http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min",
"libs/jquery-191"
],
packery: [
"plugins/packery"
]
},
shim: {
'packery': ['jquery']
}
});
require(['jquery', 'packery'], function($) {
var container = $('#container');
container.packery({
itemSelector: '.item',
gutter: 10
});
});
Any help that allows me to understand what i have done wrong would be appreciated.
Thanks

I think u should define a shim like this:
shim: {
'packery': {
deps: ['jquery'],
}, ...
Then try to export packery like so...
require(['jquery', 'packery'], function($, packery) {
var container = $('#container');
container.packery({
itemSelector: '.item',
gutter: 10
});
});
From official documentation: jQuery is not required to use Packery. But if you do enjoy jQuery, Packery works with it as a jQuery plugin.

Packery currently does not support AMD / Require JS. See https://github.com/metafizzy/packery/issues/20 However, this issue is in development and will be resolved in the future.