Options for using node in browser

Wappler General
#1

Does anyone know the current options we have for using node modules client side? Can we use ES6 import? or can we use a bundler like webpack, or rollup??? This may have been answered before but i didnt find a clear answer when researching other results on the forum.

#2

From our understanding, it can’t be done right now in Wappler’s way of web app development.

#3

@George are there plans in the near future to support this feature??? Custom modules client side??

#4

You can’t use NodeJS in a web browser.

Only if you are building a desktop app in Electron - is that want you want?

#5

I am guessing that was he is referring to is the ability to call the same library from the backend and the frontend.

There is still much confusion between CJS, ESM, UMD, AMD and where you can use them(backend or frontend).

#6

well, we can only guess :slight_smile: that is why I’m asking the details

#7

im referring to the ability to call the same library from the frontend and backend like @JonL was referring to… by using a bundler like webpack or rollup or by using ESM. something like

import {foo, bar} from './myLib';

...

export default function() {
  // your Function
};
export const function1() {...};
export const function2() {...};
 
which can be called in the browser 
<script type="module">
  import {func1} from 'my-lib';

  func1();
</script>

The rollup/webpack options seems more ideal but i think that requires accessing the index.js file and i dont think you guys are a fan of that…

#8

Actually for client side actions we have flows.

So you can use similar actions in there and have them run client side.

#9

can you show an example of how we would use flows to call a custom js module in the browser without having to access the server?

#10

You can use the Run Javascript flow action to execute any javascript function you want.
If the function returns a javascript promise then the next step will even wait till it finishes.

#11

when using require in the browser you get an error, when using import you get the following error, [import declarations may only appear at top level of a module ]… so what is the correct method to use when attempting to call a js function which uses something like for example… just in general when doing something like this you get the error above

import { createMoney } from "
https://www.jsdelivr.com/package/npm/@easymoney/money";
const money1 = createMoney({ amount: 100, currency: 'USD' });
const money2 = createMoney({ amount: 106, currency: 'USD' });
const money3 = money1.add(money2).getAmount();

any library will do just looking for the proper way to do this because every attempt has shown an error of some kind

#12

@Teodor, hello I don’t think the error has to do with missing ‘ marks… not really sure what else to try… can someone please offer some advice?

#13

@pigeon I edited your post to format the code you posted…

#14

The browser doesn’t know where to import your function from so you need to provide the path. And the import has to appear at the top level of a module.

i.e.

<script type="module">
  import { function } from './library.js'
</script>

Edit: This doesn’t work on all browsers.
You need to address fallback using the nomodule attribute for the script.

#15

My apologies, I’ll follow your guidelines going foward

#16

I’ll try it out and post the results thanks!