# UI Builder: How to extend an already included package?

**URL:** <https://discourse.nodered.org/t/ui-builder-how-to-extend-an-already-included-package/50188>\
**Category:** General\
**Tags:** uibuilder\
**Created:** [25 August 2021 21:49 UTC](https://discourse.nodered.org/t/ui-builder-how-to-extend-an-already-included-package/50188 "2021-08-25T21:49:22Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![CreativeWarlock](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/creativewarlock/32/102051_2.png) [@CreativeWarlock](https://discourse.nodered.org/u/CreativeWarlock)\
**Post date:** [25 August 2021 21:49 UTC](https://discourse.nodered.org/t/ui-builder-how-to-extend-an-already-included-package/50188/1 "2021-08-25T21:49:22Z")

</div>

Good evening,

has anyone had the need to extend an already included package with an additional plugin?

As an example, I'd like to use a plugin (utc.js) from the dayjs library.  
In plain JavaScript would be easy to extend, see: [UTC · Day.js](https://day.js.org/docs/en/plugin/utc)

Is there a way to accomplish this in ui builder?

Code so far:

index.html

```auto
...
    ...
    <script src="../uibuilder/vendor/dayjs/dayjs.min.js"></script>
    <script src="../uibuilder/vendor/dayjs/plugin/utc.js"></script>

    <script src="./uibuilderfe.min.js"></script> <!-- //prod version -->
    <script src="./index.js"></script>
</body>
</html>

```

index.js:

```auto
var app1 = new Vue({
    el: '#app',
    data: {
        periodParams: {
            startDate : dayjs().startOf('day').subtract(1, 'month').toDate(), // works fine
            endDate : dayjs().utc().startOf('day').toDate() // fails to load ui builder page
        },

```

The definition of endDate using the utc() function will lead to an  
Uncaught TypeError with the browser complaining **dayjs(...).utc is not a function**.

Anyone having a tip how to get this plugin integrated?

Cheers,  
Marcel

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [25 August 2021 21:56 UTC](https://discourse.nodered.org/t/ui-builder-how-to-extend-an-already-included-package/50188/2 "2021-08-25T21:56:00Z")

</div>

Hi Marcel ..

have you tried `dayjs.extend(utc)` as described in the link you sent ?  
either in Vue's `created` or `mounted`[Lifecycle Hooks](https://vuejs.org/v2/api/#Options-Lifecycle-Hooks)

or even outside the Vue `app1` code .. before Vue is created.

**[EDIT]**  
ok .. i tested this and what worked for me was to use  
`dayjs.extend(window.dayjs_plugin_utc) // load utc plugin`  
outside the Vue app code  
[source](https://day.js.org/docs/en/plugin/loading-into-browser)

---

<div class="post-metadata">

**Author:** ![CreativeWarlock](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/creativewarlock/32/102051_2.png) [@CreativeWarlock](https://discourse.nodered.org/u/CreativeWarlock)\
**Post date:** [25 August 2021 22:36 UTC](https://discourse.nodered.org/t/ui-builder-how-to-extend-an-already-included-package/50188/3 "2021-08-25T22:36:06Z")

</div>

Yes mate, I've tried that.  
Problem is, that it does not know 'utc'

in index.js:

```auto
     ...
    created: function() {
        var utc = require('dayjs/plugin/utc') // or whatever path to utc..
        dayjs.extend(utc)
    },

```

```auto
ReferenceError: require is not defined
    at wn.created (index.js:719)
    at He (vue.min.js:6)
    at Yt (vue.min.js:6)
    at wn.t._init (vue.min.js:6)
    at new wn (vue.min.js:6)
    at index.js:203`Preformatted text`

```

When I declare utc outside the Vue app like this...

```auto
var utc = require('dayjs/plugin/utc')
dayjs.extend(utc)

```

... it's not knowing require.

Regarding your edit. What is 'dayjs\_plugin\_utc' referring to?

---

<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:** [25 August 2021 22:41 UTC](https://discourse.nodered.org/t/ui-builder-how-to-extend-an-already-included-package/50188/4 "2021-08-25T22:41:04Z")

</div>

Hi, this page has the answer: [Loading plugin in the browser · Day.js](https://day.js.org/docs/en/plugin/loading-into-browser).

You cannot use `require` or `import` in the browser unless you have a build step that converts it (or, for `import`, your library is a HTML module in a newish browser).

---

<div class="post-metadata">

**Author:** ![CreativeWarlock](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/creativewarlock/32/102051_2.png) [@CreativeWarlock](https://discourse.nodered.org/u/CreativeWarlock)\
**Post date:** [25 August 2021 22:50 UTC](https://discourse.nodered.org/t/ui-builder-how-to-extend-an-already-included-package/50188/5 "2021-08-25T22:50:41Z")

</div>

_facepalm_

How could I miss this page in the same menu tree! 🤨

Now that it's working the timestamps sent to NR no longer carry that stupid local timezone. 🕶

Again, you have my big Thanks! @TotallyInformation

---

<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:** [8 September 2021 22:50 UTC](https://discourse.nodered.org/t/ui-builder-how-to-extend-an-already-included-package/50188/6 "2021-09-08T22:50:46Z")

</div>

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