Require node module from servercode/node_modules in "Custom Code"-Block

[Ben]

I read this article How to use NPM modules in Codeless logic in API Services, Event Handlers and Timers
I uploaded my “node_modules” folder to “servercode”.

When I start the code I get this error:

“Uncaught (in promise) Error: Module name “axios” has not been loaded yet for context: …”

Why?

[vladimir-upirov]

Hi @Ben

Could you please provide your appId, the deployment model name and place where we can find the custom code block

Regards, Vlad

[Ben]

AppID: A64366E6-49A2-CBBC-FF22-93A591AEF200
pagename: testbk
deployment model name?
You can find the custom code block in the logic of the button “testaxios”

[vladimir-upirov]

oh, UIBuilder has a different env (browser) when CloudCode (API Services/Handlers/Timers) is running in NodeJS

so, this article is not suitable for the UI-Builder

[vladimir-upirov]

in order to import a js module in the UI Builder you should use the following code

const mapboxgl = await BackendlessUI.requireModule( "https://api.mapbox.com/mapbox-gl-js/v2.5.0/mapbox-gl.js" )

[vladimir-upirov]

Btw, instead of using axios I can recommend you to use our GitHub - Backendless/Request: Simple Node.js and browser REST client it’s already enabled in the UI-Builder.

const result = await Backendless.Request.get('https://api....')

[Ben]

So its not possible to import or require a npm module like in codeless methods?
Like mark is showing here:

How to use NPM modules in Codeless logic in API Services, Event Handlers and Timers

With the introduction of the Custom Code Codeless block, it is now possible to use functionality from NodeJS modules in Codeless logic. This recipe demonstrates the process of importing an NPM module and using it in a Codeless API Service. A sceptic reader may point out that using the Custom Code in Codeless is an oxymoron. Technically, it is, however, any code you place inside of Custom Code would be seen in your overall logic as one Codeless block, so I’d continue to maintain the position th…

[vladimir-upirov]

Mark shared a case for CloudCode, for UIBuilder see my previous comment

[Alex_Klein]

Hi Vladimir, your comment explains how to import a JS file from an external site… but is there perhaps a way to install a JS library in the file system of a UI Builder container, which can then be available in custom functions (without fetching code from an external site, similar to how NPM modules can be installed in the file system for Cloud Code)?

[vladimir-upirov]

You can put everything you need into the container folder and import it using the Settings=>Libraries screen.

I recommend you put your libs into the following folder:

/ui-builder/containers/{YOUR_CONTAINER_NAME}/libs/...

for example:

[vladimir-upirov]

according to the NPM pay attention that not every module can run in the browser even if it’s designed for browsers.

Some modules can run only in the NodeJS env or must be built/composed with a module bundler such as Webpack/Parcel/etc.

Therefore, if the module is not capable for running in a browser you might need to build it first locally

[Alex_Klein]

Hi Vladimir, thanks for the guidance. I installed the module locally as described in https://support.backendless.com/t/how-to-use-npm-modules-in-codeless-logic-in-api-services-event-handlers-and-timers/13642, and then I put the module (called “rrule”, a folder with subfolders and files) into ./libs and set up the following path in ‘Settings’:

But when I try to run a custom function that starts with

const { datetime, RRule, RRuleSet, rrulestr } = require('rrule');

an error results,
Uncaught (in promise) Error: Invalid UNTIL value: 20230201T023000Z\nRRULE:FREQ=MONTHLY at checkStatus (sdk.js:14:918562)

I have the rrule module installed on the server and when I run a similar custom code function using an API service, there’s no error (following the recipe Mark provided for how to use NPM modules in Cloud Code). So something is wrong in the UI Builder version of things… any ideas? I realize this might be outside of the scope of support you provide, debugging external JS library stuff… but it would be really nice if there was a clear recipe for how to use NPM modules in Codeless logic in UI Builder

[vladimir-upirov]

Browser (UI-Builder) and NodeJS (CloudCode) work differently.

1. you need to specify a js file indeed of pointing to a folder when enabling a lib in the UIBuilder
2. you can not use the NodeJS Require const x = require('x') in the UIBuilder code because such import is not supported in the Browser ENV
3. generally when importing a lib in the browser the library is accessible from the global scope, so you do not need to require it
4. have you changed the lib to be supported in the browser without an additional build phase?

[Alex_Klein]

So I found a bug in the way I was calling things. Now the error is

Uncaught (in promise) Error: Module name "rrule" has not been loaded yet for context: _. Use require([])

So it seems your statement " 1. you can not use the NodeJS Require const x = require('x') in the UIBuilder code because such import is not supported in the Browser ENV" is correct

No, I’m new to JS and coding in general, I have no idea how to “change the lib to be supported in the browser without an additional build phase”… but will research that now! If you have a link to point me in the right direction, much appreciated, if not thanks for your help anyway!

[vladimir-upirov]

we use RequireJS in the UIBuilder that’s why you can see the such error.

Normally, if you can find a line in the module doc about CDN or Download a …min.js file it’s already adapted for using in a browser

for instance, your library describes it here: GitHub - jakubroztocil/rrule: JavaScript library for working with recurrence rules for calendar dates as defined in the iCalendar RFC and more.

 Alternatively, download manually:
* [rrule.min.js](https://jakubroztocil.github.io/rrule/dist/es5/rrule.min.js) (bundled, minified)
* [rrule.js](https://jakubroztocil.github.io/rrule/dist/es5/rrule.js) (bundled, not minified)

<script src="rrule/dist/es5/rrule.min.js"></script>

so, I assume just put the file into your app and import it in the Settings screen and then in code just try to use it from the global scope

[Alex_Klein]

Hi Vladimir — OK, I have a file now in a folder like so: /rrule/rrule.js

I set the path in settings to

However, just using a function that is found in that rrule.js file doesn’t work, I think I need some sort of “require” somehow. Error in console is

Uncaught (in promise) ReferenceError: rrulestr is not defined

(rulstr is a function in the library).

[vladimir-upirov]

according to the source code https://jakubroztocil.github.io/rrule/dist/es5/rrule.js

it exports rrule where you can find the rrulestr method

[Alex_Klein]

Brilliant, I got it to work thanks to you — I just use rrule.rrulestr(arg) in my custom code function. Thank you very, very much!

[vladimir-upirov]

Great, I’m glad you get working!