topic Re: How exactly should third party libraries be included in WAB through the lib/main? in Web AppBuilder Custom Widgets Questions

How exactly should third party libraries be included in WAB through the lib/main?

PavelVeselský1 — Sun, 12 Dec 2021 11:08:34 GMT

The official documentation for using other libraries in Web AppBuilder points to libs/main for including AMD modules in multiple widgets. I want to use Proj4js in my widgets, so I deployed it in the d:\WAB\client\stmapp\libs directory and added the path ("./proj4js/dist/proj4") into the libs/main.js dependency array. The path to the proj4.js file is d:\WAB\client\stmapp\libs\Proj4js\dist\proj4.js, which should be where the setting is pointing to. This should be enough according to the documentation, but it doesn't work. http://myname/webappviewer/?config=sample-configs/config-demo.json reads code from the client, so the problem shouldn't be in reading wrong address, but to be sure I copied the code to all WAB apps where I have the widget as well (stem app + all my apps).

Someone had a similar problem and solved it, though he asked for a non-AMD module and proj4js seems to be AMD-compliant, so his solution is unlikely to work for me. I tried everything they suggested there. I added window.path + 'libs/proj4js/dist/proj4.js' into the resources array in the Init.js file - this is suggested for static sources, but probably helped that guy. In the same file, I created dojoConfig.aliases with reference for proj4js:

dojoConfig.aliases = [
  ['Proj4js', 'libs/proj4js/dist/proj4']
];

I defined the library by the alias, but the first use of Proj4js in the code throws a "not found error" - obviously the alias is not recognized. I didn't find any other address to define the library in my widget which wouldn't throw the same error. In the linked discussion they omitted the definition, but I don't think it's the solution in my case.

define([
  //other libraries
  "Proj4js"
],
function (
  //other libraries
  Proj4js
) {
  //other code

  //Proj4js unknown error here if definition omitted
  Proj4js.defs["EPSG:102067"] = "S-JTSK Krovak Proj4js definition";

  //the rest of my code
}

I intend to use this for multiple (perhaps even tens in the future) widgets, so I want to learn the lib/main methods even though I managed to enable proj4js for a single module. I deployed proj4js in my widget and defined it by relative path in my code: "./proj4js-2.3.14/dist/Proj4".

This question is based on my older GIS.stackexchange question.

Re: How exactly should third party libraries be included in WAB through the lib/main?

RobertScheitlin__GISP — Wed, 06 Apr 2016 20:11:20 GMT

Pavel,

so I deployed it in the d:\WAB\client\stmapp\libs directory and added the path ("./proj4js/dist/proj4") into the libs/main.js dependency array.

I think you have gone to deep with your path when adding it to the main.js dependency array. Try:

path ("./proj4js/dist") instead as the proj4 is the actual js file and all the path should be is the folders.

Re: How exactly should third party libraries be included in WAB through the lib/main?

PavelVeselský1 — Thu, 07 Apr 2016 11:44:38 GMT

I tried to abbreviate the path to "./proj4js-2.3.14/dist" as you suggested, but I got an error: "NetworkError: 404 Not Found - http://myname:3344/webappviewer/widgets/MyWidget/proj4js-2.3.14/dist.js"

I don't know why my Dojo expects a .js file, but it does.

Re: How exactly should third party libraries be included in WAB through the lib/main?

RobertScheitlin__GISP — Thu, 07 Apr 2016 12:58:13 GMT

Pavel,

I tried to abbreviate the path to "./proj4js-2.3.14/dist" as you suggested

I am not sure where ./proj4js-2.3.14/ is coming from as you said the path was d:\WAB\client\stmapp\libs\Proj4js\dist\proj4.js.

My suggestion was: path ("./proj4js/dist")

Then in your widget code you would use require like this:

"libs/proj4js/dist/proj4" and a parameter of proj4

Re: How exactly should third party libraries be included in WAB through the lib/main?

FlorianCADOZ — Mon, 25 Apr 2016 07:47:26 GMT

Hi Pavel,

I don't know if it can help you but I asked a similar question here !