# Use a js file in NodeJs and VueJs

**URL:** <https://discourse.nodered.org/t/use-a-js-file-in-nodejs-and-vuejs/86842>\
**Category:** Developing Nodes\
**Tags:** dashboard-2\
**Created:** [28 March 2024 21:10 UTC](https://discourse.nodered.org/t/use-a-js-file-in-nodejs-and-vuejs/86842 "2024-03-28T21:10:04Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [28 March 2024 21:10 UTC](https://discourse.nodered.org/t/use-a-js-file-in-nodejs-and-vuejs/86842/1 "2024-03-28T21:10:04Z")

</div>

Hi folks,

I have a js file containing a series of functions. I want to call those functions both in my ui node backend js file, and also in my ui node frontend vue file.

The js file is included in the frontend umd file luckily, so I have it available in the backend and the frontend. However my node's NodeJs backend js file only seems to allow a _ **commonjs** _ module to be loaded via `require`, while my node's frontend vue file only seems to allow an _ **es6** _ module to be loaded via `import`.

I experimented a lot to find a solution. And ChatGpt gave me a lot of of realistic looking examples, but they all failed unfortunately...

Does anybody whether this is possible?  
And if yes: how 😋

Thanks!!  
Bart

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [28 March 2024 22:33 UTC](https://discourse.nodered.org/t/use-a-js-file-in-nodejs-and-vuejs/86842/2 "2024-03-28T22:33:56Z")

</div>

> [@BartButenaers](#):
>
> Does anybody whether this is possible?

Not sure if I've fully understood. However, what I do is to build both an CommonJS and an ESM version using ESBUILD.

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [29 March 2024 08:19 UTC](https://discourse.nodered.org/t/use-a-js-file-in-nodejs-and-vuejs/86842/3 "2024-03-29T08:19:39Z")

</div>

> [@TotallyInformation](#):
>
> However, what I do is to build both an CommonJS and an ESM version using ESBUILD.

Hi Julian,  
Thanks for joining!  
Hmm I thought that I had to make my js file (containing a series of functions) to support both CommonJs (for my node backend) and ESM (for my vue frontend).

But you make me thinking I am talking nonsense. I see [here](https://vitejs.dev/guide/dep-pre-bundling#the-why) that Vite build (which we execute via `npm run build` in the D2 dashboard) should convert automatically CommonJs modules to ESM modules.

Will do some more tests this weekend into that direction, and report my feedback here.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [29 March 2024 13:05 UTC](https://discourse.nodered.org/t/use-a-js-file-in-nodejs-and-vuejs/86842/4 "2024-03-29T13:05:15Z")

</div>

No problem. 🙂

I was pleasantly surprised recently to stumble upon a Node.js developer who has FINALLY grasped the nettle that is being able to `require` ESM modules in CommonJS ones. Something that is really starting to hurt Node.js now. Still early days so it will be a few years yet before it becomes mainstream probably but long overdue.

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [12 April 2024 21:32 UTC](https://discourse.nodered.org/t/use-a-js-file-in-nodejs-and-vuejs/86842/5 "2024-04-12T21:32:12Z")

</div>

Ok I finally found a way to use a js file both in the backend and frontend of a ui node. Not sure whether it is the best way to achieve it, but at least it seems to work. Will describe how to do it, in case anybody else ever needs it.

1. For the ui-svg node in D2, I created following _ **directory structure** _:

2. The _ **svg\_utils.js** _ is a commonJs file, containing the functions that I need in the backend and frontend:

3. This js file can be used in the backend _ **ui-svg.js** _ just like that:

4. By default Vite will - during the build - only add npm packages (from the node\_modules folder) into the bundle (.umd file), which you use in the vue file. So we need to specify in _ **vite.config.js** _ that our js file also needs to be transpiled from commonJs to an ESM module, and that this ESM module code needs to be included into the bundle file:

5. Now execute `npm run build` which will build everything and create our .umd bundle file.

6. Finally use this transpiled ESM module from our sgv\_utils.js file into our _ **UISvg.vue** _ file (i.e. the frontend code of the ui node):

So now - beside all imported npm modules - our custom js file is now also converted by Vite to an ESM module and included in the bundle.

Good luck coding UI nodes for D2!!  
Bart

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [12 April 2024 21:55 UTC](https://discourse.nodered.org/t/use-a-js-file-in-nodejs-and-vuejs/86842/6 "2024-04-12T21:55:03Z")

</div>

BTW step 6 needs to be done before step 5, because you want Vite to put this updated code from your Vue file into the bundle...

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [26 April 2024 21:55 UTC](https://discourse.nodered.org/t/use-a-js-file-in-nodejs-and-vuejs/86842/7 "2024-04-26T21:55:11Z")

</div>

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