External Library Confusion / UUIDv7

I’ve been pulling my hair out to get an external (any external, been through several) to work. So far, I’ve only gotten the confetti demo to work. I’ve gone through the “Using external JS libraries” and I’m confident that I’m putting the in the correct place (custom code) and the code in Action correctly – and the confetti example works fine.

I’ve repeatedly gone through the in-app Custom scripts “Custom code” documentation (e.g., where it gives the <script> function myFunction()... and the same confetti() example, etc.)
mple

I also looked at this thread but I am pretty confident the problem is me :grimacing:

I think I’m getting a bit confused by the layers of abstraction here and just not getting the paradigm of the Custom Code, Actions, and execution sequence. (For example, I kept testing changes, but didn’t realize I needed to refresh my browser to get some changes to Custom Code to update/execute.)

I’ve tried multiple libraries, the ESM approach, and everything else I can think of. I feel like I’ve done more complicated things in UIBakery, and I’m not sure what simple thing I’m missing here.

FWIW, not sure it’s accurate, and keep revising things to make it work, here’s what’s in my Custom code section now:

<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.3/dist/confetti.browser.min.js"></script>
<!--<script src="https://cdn.jsdelivr.net/npm/uuidv7@1.0.2/dist/index.min.js"></script>-->
<script type="module">
  // Import from a CDN that supports ES module imports
  import { v7 as uuidv7, parse as uuidParse } from "https://esm.sh/uuid@9.0.0";
  import base32Encode from "https://esm.sh/base32-encode@2.0.0";

  function generateBase32EncodedUUIDv7() {

    // Generate a UUIDv7 (standard hyphenated string)
    const uuidStr = uuidv7();

    // Convert the UUID string to a Uint8Array (16 bytes)
    const uuidBytes = uuidParse(uuidStr);

    // Base32 encode using RFC4648 without padding
    const encoded = base32Encode(uuidBytes, "RFC4648", { padding: false });

    return encoded;
  }

  console.log(generateBase32EncodedUUIDv7());
</script>

And in my Action, I’ve tried calling the generateBase32EncodedUUIDv7() function directly, and tried pulling the function code into the Action directly, which is where it sits at the moment:

 // Generate a UUIDv7 (standard hyphenated string)
    const uuidStr = uuidv7();

    // Convert the UUID string to a Uint8Array (16 bytes)
    const uuidBytes = uuidParse(uuidStr);

    // Base32 encode using RFC4648 without padding
    const encoded = base32Encode(uuidBytes, "RFC4648", { padding: false });

confetti({
  particleCount: 500,
  spread: 300,
  origin: { y: 0.6 }
});

return {{encoded}};

Trying to provide as much detail as possible – and going to keep working on, primarily posting this in case anyone else is sharing the same pain point, or is able to point out what silly mistake I’m making :face_with_peeking_eye:

And curious if anyone has a good UUIDv7 library they have working or if (since we’re self-hosted) if there’s some way for us to add a package the old-fashioned way with npm. :crazy_face:

1 Like

I don’t know if this is the proper way to do this, but it works. To use the imported module in actions, you need to attach it to the window (global) scope.
<script type="module"> import { uuidv7 } from "https://cdn.jsdelivr.net/npm/uuidv7@1.0.2/+esm"; window.uuidv7 = uuidv7;</script>

1 Like

@Bradley_Graber is absolutely right, you will only make it work like that.

The issue here is that the .../dist/index.min.js file uses the ESM export someVar and not the CJS exports.myVar = someVar (or attaching it to the globalThis object). When you add a script with the src to that link, you will see an error in the console

<script src="https://cdn.jsdelivr.net/npm/uuidv7@1.0.2/dist/index.min.js"></script>
<!-- will throw "Uncaught SyntaxError: Unexpected token 'export'" -->

Normally, the main dist file of packages checks how it should expose its functions and variables according to what is trying to access them, this package doesn’t.

Furthermore, about the thread you linked where I say the docs are deprecated, I messed up there. It’s actually all good, I was in the wrong category Automations.