topic Moment Library not loading correctly in Web AppBuilder Custom Widgets Questions

Moment Library not loading correctly

JustinBridwell2 — Thu, 03 Feb 2022 15:17:38 GMT

I am working on a Web AppBuilder application that uses 3rd party libraries. One of these libraries includes the Moment and Moment-Timezone libraries. On load, I immediately get and error: 'Uncaught TypeError: Cannot read properties of undefined (reading 'tz')'. Researching this; I found an article that point to the source of this problem being due to the moment-timezone-with-data-min.js file loading before the moment-min.js file. I am not sure where to make this change within my app. It looks like the libs get loaded as resources in my `init.js` file and I have placed them in the proper order there. Is there another folder or file with dependencies? I also see that in the libs folder, there is a moment folder and the files are in this order. How can I change this order so they load properly. Or is there another issue I may be overlooking?

Re: Moment Library not loading correctly

LaurynasGedminas2 — Tue, 08 Feb 2022 20:52:34 GMT

Can it be loaded thru the widget:

// Load Extrenal Libs
require({
paths: {
react:
'https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min',
'react-dom':
'https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min',
},
});

Re: Moment Library not loading correctly

JustinBridwell2 — Wed, 09 Feb 2022 15:53:41 GMT

In what file do you propose adding the above code? The main widget.js? If so, I am using WabVersion 2.20, and I don't see any 'require'. I do have 'define(['<path to libs>'], function(<lib_name>) {<code goes here>});' in my widget.js file? Is there another file I would add that to? I already have it in my main init.js file as mentioned, but that does not seem to guarantee it gets loaded in the proper order:

From init.js:

resources = resources.concat([

window.apiUrl + 'dojo/resources/dojo.css',

window.apiUrl + 'dijit/themes/claro/claro.css',

window.apiUrl + 'esri/css/esri.css',

window.path + 'jimu.js/css/jimu-theme.css',

window.path + 'libs/moment/moment.min.js',

window.path + 'libs/moment/twix.js',

window.path + 'libs/moment/moment-timezone-with-data.min.js',

])

Re: Moment Library not loading correctly

LaurynasGedminas2 — Wed, 09 Feb 2022 16:55:34 GMT

Yes, in the Widget.js file:

Re: Moment Library not loading correctly

JustinBridwell2 — Wed, 09 Feb 2022 17:10:17 GMT

OK, just to clarify; Should I add that `require({ paths: { moment: '<path to moment>}});` at the top and then add it underneath in my `define({'moment'}), as well?