I am trying to create a app with users and logins

Help & Support đź’»
2

Hi @coder911,

First of all, just so we are using the same terms, dcodeIO is the author of the library and the library’s name is bcrypt.

This is a pretty common issue, that will confuse many newer developers. What’s troubling you here, is the module system being used in that specific file of the library.

Module System?

You might know of the native module systems CommonJS, ESM/ECMAScript modules, etc. that let you import libraries.

Just as a quick refresh on those, here is a basic demonstration:

commonjs

// myScript.js
module.exports = function myFunction() {...};

// main.js
const myFunction = require('myScript.js');

ESM

// myScript.js
export default function myFunction() {...};

// main.js
import myFunction from 'myScript.js';

Some years ago, the author(s) of a library needed to provide multiple files, each for their respective module system, for example, library.amd.js, library.common.js, library.global.js, etc.

Nowadays, it’s enough to either provide files using ESM, which the many bundlers or some CDNs will automatically transpile to the needed format. Or, for the convenience of importing front-end libraries, provide a single file using UMD (Universal Module Definition), which is rather a pattern than a module system, that adapts to the environment it’s imported in.

The link of the bcrypt library you shared points to a file using ESM exports. But this isn’t supported by UIBakery, or actually the way they intend that external libraries are imported doesn’t support ESM. Well, at least if you just paste the <script> element with the src set.

Instead, what you want to import, is the UMD version of the library. I’ll just explain the general process I do when importing a library, so you can do it yourself for future imports:

  1. Look for the libary on any CDN, we’ll use jsdelivr. When you found it, at the top you will always see the code to “install” the library

    image
    image801Ă—237 12.7 KB

    Generally, you want to use the import of the type Default. Most libraries use the UMD pattern in the default file. In this case, with bcrypt, you can even see /umd/ in the path of the file.

  2. Then add that code to your Custom Code section

    image
    image589Ă—137 8.52 KB

  3. And bcrypt will be available in your actions

    image
    image288Ă—483 11.5 KB

It’s easy, just like that!

Alternatively, if there is no link to a file that uses the UMD pattern or just attaches to the global object, you can use the ESM file. @Bradley_Graber showed in this response that you can just manually import the ESM module and attach it to the global object yourself like

<script type="module">
	import bcryptjs from 'https://cdn.jsdelivr.net/npm/bcryptjs@3.0.2/+esm';
	window.bcrypt = bcryptjs;
</script>
3 Likes