Uibuilder and some kind of 4 way swipe-card

General
1

Hello. I'm trying to make a quite simple ui with a 4 way swipe card. I have spent 6 days trying to make something work, now I am tired, and quite sad because of all the dumbness I am feeling.

I am quite simply trying to make use of the @use-gesture vanilla-js library, for some quite simple cards. i tried adding to library and importing in the html, i get a "process i not defined" -error, i tried importing into the index.js file and get an import may only occur at top level -error.

I tried with other libraries, but it's all the same, which tell me that I am to dumb for this and in need of acute help.

Can someone please explain to me like i am hardly smart enough to breath, what i need to do, to import and use a library, so I can make a bunch of very simple swipeable cards in node-red and or ui-builder?

2

So lets start with the basics. Are you using the latest node-red and uibuilder? And what version of node.js are you using?

Have you tried the various uibuilder templates and are they working?

Then maybe you could share the code you've tried so that we can help.

3

I am currently using node-red v 3.0.2 and uibuilder 5.1.1,
the various uibuilder templates are working fine, on all my platforms.

  • installed uibuilder from palette
  • configured folder from uibuilder and deployed
  • went to libraries and installed @use-gesture/core, and @use-gesture/vanilla
    *checked location of new .js files

inserted

    <script src="../uibuilder/vendor/@use-gesture/core/dist/use-gesture-core.cjs.js"></script>
    <script src="../uibuilder/vendor/@use-gesture/vanilla/dist/use-gesture-vanilla.cjs.js"></script>

into my index.html below: <script src="./index.js">/* OPTIONAL: Put your custom code here */</script>

browers presents error: Uncaught ReferenceError: process is not defined

i read somewhere that it needs to be a module, so I changed imports to

<script type="module" async src="../uibuilder/vendor/@use-gesture/vanilla/dist/use-gesture-vanilla.cjs.js "></script>

with no change.

i tried putting it on top aswell, with no results

so i tried import { createGesture, dragAction, pinchAction } from '../uibuilder/vendor/@use-gesture/vanilla/dist/use-gesture-vanilla.cjs.js' and i get a new error: ambiguous indirect export:

I have also tried many other libraries, with the same results
I am obviously missing some fundamental knowledge here.

edit: typo in script, not in my code

4

To use import in your javascript, you need to make your index.js a module as well. If you are going to do that, you are best off using the ESM version of the new uibuilder client library. See Using the modern front-end client (totallyinformation.github.io) for details.

As it shows in that document, load your index.js as a module and then import both uibuilder (first) then any other libraries.

HOWEVER, I've checked the code for the "Vanilla" version of that library and it will not work. The only way to make it work would be to install both the vanilla and core versions of the library not to uibuilder but to the <instanceRoot> folder for your uibuilder node and then use a build step to build a suitable output file.

That is because the vanilla library does its own imports in a way that will only ever work with a build tool and not as a native module.

So it isn't because you are dumb but because the author has made a large number of assumptions that they have not documented.

5

Thank you very much for your effort and time. I will dig up the rest of my willpower and make this work. Thanks again.

6

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.