# How to use primeelements in Aurelia

**URL:** <https://discourse.aurelia.io/t/how-to-use-primeelements-in-aurelia/911>\
**Category:** Help Requests\
**Created:** [March 15, 2018, 10:18am UTC](https://discourse.aurelia.io/t/how-to-use-primeelements-in-aurelia/911 "2018-03-15T10:18:14Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Mobe91](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/mobe91/32/1083_2.png) [@Mobe91](https://discourse.aurelia.io/u/Mobe91)\
**Post date:** [March 15, 2018, 10:18am UTC](https://discourse.aurelia.io/t/how-to-use-primeelements-in-aurelia/911/1 "2018-03-15T10:18:14Z")

</div>

Hi,

I would like to use the webcomponents provided by [primeelements](https://www.primefaces.org/primeui/#primeelements) in my Aurelia application but so far, I could not figure out how to do this.

It appears that primeelements uses x-tag whereas Aurelia only provides a Polymer integration. So I am wondering if this can work at all?

I would appreciate some help. Thanks!

---

<div class="post-metadata">

**Author:** ![Alexander-Taran](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/alexander-taran/32/2308_2.png) [@Alexander-Taran](https://discourse.aurelia.io/u/Alexander-Taran)\
**Post date:** [March 15, 2018, 10:46am UTC](https://discourse.aurelia.io/t/how-to-use-primeelements-in-aurelia/911/2 "2018-03-15T10:46:59Z")

</div>

What have you tried?  
And where does it fail?

---

<div class="post-metadata">

**Author:** ![Mobe91](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/mobe91/32/1083_2.png) [@Mobe91](https://discourse.aurelia.io/u/Mobe91)\
**Post date:** [March 15, 2018, 11:15am UTC](https://discourse.aurelia.io/t/how-to-use-primeelements-in-aurelia/911/3 "2018-03-15T11:15:04Z")

</div>

So far, I have tried to install x-tag via `jspm install npm:x-tag` and primeui via `jspm install npm:primeui`.  
I then included `<require from="x-tag/dist/x-tag-core"></require>` in my app.html.  
In one of my templates where I wanted to use the primeelements components, I included `<require from="primeui/primeelements"></require>`.

On page reload I now receive the error:

```auto
Uncaught (in promise) Error: (SystemJS) Template markup must be wrapped in a <template> element e.g. <template> <!-- markup here --> </template>
	Error: Template markup must be wrapped in a <template> element e.g. <template> <!-- markup here --> </template>
	    at Object.createTemplateFromMarkup (http://localhost:9000/jspm_packages/npm/aurelia-pal-browser@1.6.0/aurelia-pal-browser.js:418:15)
	    at eval (http://localhost:9000/jspm_packages/npm/aurelia-loader-default@1.0.3/aurelia-loader-default.js:43:42)
	    at <anonymous>
	Error loading http://localhost:9000/jspm_packages/npm/x-tag@1.5.11/dist/x-tag-core.html!template-registry-entry
	    at Object.createTemplateFromMarkup (http://localhost:9000/jspm_packages/npm/aurelia-pal-browser@1.6.0/aurelia-pal-browser.js:418:15)
	    at eval (http://localhost:9000/jspm_packages/npm/aurelia-loader-default@1.0.3/aurelia-loader-default.js:43:42)
	    at <anonymous>
	Error loading http://localhost:9000/jspm_packages/npm/x-tag@1.5.11/dist/x-tag-core.html!template-registry-entry

```

`jspm_packages/npm/x-tag@1.5.11/dist/x-tag-core.html` does not exist, no idea where this loading attempt is coming from.

---

<div class="post-metadata">

**Author:** ![Alexander-Taran](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/alexander-taran/32/2308_2.png) [@Alexander-Taran](https://discourse.aurelia.io/u/Alexander-Taran)\
**Post date:** [March 15, 2018, 11:27am UTC](https://discourse.aurelia.io/t/how-to-use-primeelements-in-aurelia/911/4 "2018-03-15T11:27:26Z")

</div>

require in html supposes that you are trying to reference Aurelia custom element which by convention have associated views with same name but html extension  
So as a first fix - move code dependencies to code

to get started you can even try to include x-tag and primeui in index.html as script tags… just to make sure that it works… and move on up from there

---

<div class="post-metadata">

**Author:** ![Mobe91](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/mobe91/32/1083_2.png) [@Mobe91](https://discourse.aurelia.io/u/Mobe91)\
**Post date:** [March 16, 2018, 4:35pm UTC](https://discourse.aurelia.io/t/how-to-use-primeelements-in-aurelia/911/5 "2018-03-16T16:35:37Z")

</div>

I tried including them as script tags as follows:

```auto
<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script src="node_modules/x-tag/dist/x-tag-core.js"></script>
<script src="node_modules/primeui/primeui.js"></script>
<script src="node_modules/primeui/primeelements.js"></script>
<script src="dist/bootstrapper.js" ></script> <!-- calls Aurelia bootstrapper -->

```

The problem with this is, that primeui requires jquery and jquery is loaded via SystemJS inside`dist/bootstrapper.js`. So primeui gets loaded too early when I do it like shown above.

I then tried to load the primeui stuff using SystemJS.

Basically, I have my template:

```auto
<template>
    <require from="primeui/primeelements"></require>
</template>

```

Primeelements assumes to have access to the global `PUI` variable defined by primeui and to the global `xtag` variable defined by x-tag. Thus I configured the primeelements package in SystemJS as described [here](https://github.com/systemjs/systemjs/issues/666):

```javascript
System.config({
  ...
  packages: {
    "primeui": {
      "meta": {
        "primeelements.js": {
          "globals": {
            "PUI": "primeui/primeui",
            "xtag": "x-tag/dist/x-tag-core.js"
          }
        }
      }
    }
  },
  ...
})

```

This indeed results in the required globals being available when primeelements.js is invoked. However, it seems that the primeui module is not loaded beforehand. It contains jquery UI widget definitions that look like this:

```javascript
(function(factory) {
    if (typeof define === 'function' && define.amd) {
      define(['jquery'], factory);
    } else if (typeof module === 'object' && module.exports) {
      module.exports = function(root, jQuery) {
        factory(jQuery);
        return jQuery;
      };
    } else {
      factory(jQuery);
    }
  }(function($) {
    $.widget("primeui.puidropdown", {
      // ....
    });
}));

```

For the above module, `module.exports` is called but then the module is never instantiated via the factory method. Thus, the widget is never defined which causes following error when the webcomponent tags are processed by x-tag:

```auto
Uncaught TypeError: this.xtag.select.puidropdown is not a function
    at HTMLElement.created (primeelements.js:1096)
    at HTMLElement.value [as createdCallback] (x-tag-core.js:3837)
    at ViewFactory.create (aurelia-templating.js:2406)
    at HtmlBehaviorResource.create (aurelia-templating.js:4114)
    at eval (router-view.js:129)
    at <anonymous>

```

`this.xtag.select` is a jQuery object.

It feels like I am almost there… Unfortunately I’m not an expert with this whole SystemJS and module loading stuff. So I hope you can help!

---

<div class="post-metadata">

**Author:** ![zewa666](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/zewa666/32/19_2.png) [@zewa666](https://discourse.aurelia.io/u/zewa666)\
**Post date:** [March 16, 2018, 6:05pm UTC](https://discourse.aurelia.io/t/how-to-use-primeelements-in-aurelia/911/6 "2018-03-16T18:05:44Z")

</div>

Sounds like you need to shim primeelements to make sure to define its dependencies. Take a look here at the shim section [https://github.com/jspm/registry/wiki/Configuring-Packages-for-jspm](https://github.com/jspm/registry/wiki/Configuring-Packages-for-jspm)

---

<div class="post-metadata">

**Author:** ![Mobe91](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/mobe91/32/1083_2.png) [@Mobe91](https://discourse.aurelia.io/u/Mobe91)\
**Post date:** [March 18, 2018, 12:46pm UTC](https://discourse.aurelia.io/t/how-to-use-primeelements-in-aurelia/911/7 "2018-03-18T12:46:01Z")

</div>

Ok, I tried to shim primeelements according to [explanations on github](https://github.com/jspm/jspm-cli/issues/689) as follows, no idea if that is right:

```javascript
System.config({
  ...
  packages: {
    "primeui": {
      "meta": {
        "primeelements.js": {
          "globals": {
            "PUI": "primeui/primeui",
            "xtag": "x-tag/dist/x-tag-core.js"
          }
        }
      }
    }
  },
  meta: {
    "npm:primeui@4.1.15/primeelements.js": {
      "deps": ['npm:primeui@4.1.15/primeui.js', 'npm:x-tag@1.5.11/dist/x-tag-core.js'],
      "format": "global"
    }
  }, ...

```

However, this seems to have no effect - same problem as before. I also tried to extend this with

```javascript
meta: {
    "npm:primeui@4.1.15/primeelements.js": {
      "deps": ['npm:primeui@4.1.15/primeui.js', 'npm:x-tag@1.5.11/dist/x-tag-core.js'],
      "format": "global"
    },
    "npm:primeui@4.1.15/primeui.js": {
      "format": "global"
    }
}

```

This gives the error

```auto
    ERROR [app-router] Error: (SystemJS) require is not a function
	TypeError: require is not a function
	    at eval (http://localhost:9000/jspm_packages/npm/primeui@4.1.15/primeui.js:11349:4)
	    at eval (<anonymous>)
	Evaluating http://localhost:9000/jspm_packages/npm/primeui@4.1.15/primeui.js
	Error loading http://localhost:9000/jspm_packages/npm/primeui@4.1.15/primeelements.js
	    at eval (http://localhost:9000/jspm_packages/npm/primeui@4.1.15/primeui.js:11349:4)
	    at eval (<anonymous>)
	Evaluating http://localhost:9000/jspm_packages/npm/primeui@4.1.15/primeui.js
	Error loading http://localhost:9000/jspm_packages/npm/primeui@4.1.15/primeelements.js

```

Also, addings `deps` to the package definition has no effect:

```javascript
System.config({
  ...
  packages: {
    "primeui": {
      "meta": {
        "primeelements.js": {
          "globals": {
            "PUI": "primeui/primeui",
            "xtag": "x-tag/dist/x-tag-core.js"
          },
          "deps": [
            "primeui/primeui",
            "jquery-ui"
          ]
        }
      }
    }
  },
  meta: {
    "npm:primeui@4.1.15/primeelements.js": {
      "deps": ['npm:primeui@4.1.15/primeui.js', 'npm:x-tag@1.5.11/dist/x-tag-core.js'],
      "format": "global"
    }
  }, ...

```

---

<div class="post-metadata">

**Author:** ![zewa666](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/zewa666/32/19_2.png) [@zewa666](https://discourse.aurelia.io/u/zewa666)\
**Post date:** [March 18, 2018, 1:47pm UTC](https://discourse.aurelia.io/t/how-to-use-primeelements-in-aurelia/911/8 "2018-03-18T13:47:08Z")

</div>

Can you create a sample with what you’ve been trying so we can fiddle around?

---

<div class="post-metadata">

**Author:** ![Mobe91](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/mobe91/32/1083_2.png) [@Mobe91](https://discourse.aurelia.io/u/Mobe91)\
**Post date:** [March 18, 2018, 2:23pm UTC](https://discourse.aurelia.io/t/how-to-use-primeelements-in-aurelia/911/9 "2018-03-18T14:23:38Z")

</div>

I have created a sample project based on skeleton-navigation that contains my work so far. Sadly, I cannot upload zip files here so I have uploaded it here: [https://we.tl/SDP1v8ZLT9](https://we.tl/SDP1v8ZLT9)  
I included a simple primeelements component on the welcome screen so you should see the error message as soon as you load the page.  
Thanks a lot for all your help so far!!

---

<div class="post-metadata">

**Author:** ![zewa666](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/zewa666/32/19_2.png) [@zewa666](https://discourse.aurelia.io/u/zewa666)\
**Post date:** [March 18, 2018, 3:11pm UTC](https://discourse.aurelia.io/t/how-to-use-primeelements-in-aurelia/911/10 "2018-03-18T15:11:52Z")

</div>

I get a totally different error being:  
`this.xtag.select.puidropdown is not a function`

so it seems like the setup is ok but either the library itself has a bug or something changed in the meantime. Found this [Plunker](https://plnkr.co/edit/WMawVdtcvDpmVxzI4b3Q?p=preview) and [SO question](https://stackoverflow.com/questions/40641637/primeui-how-to-get-it-to-work) related

And here an official request to their forums:  
[https://forum.primefaces.org/viewtopic.php?f=16&p=165030](https://forum.primefaces.org/viewtopic.php?f=16&p=165030)

---

<div class="post-metadata">

**Author:** ![Mobe91](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/mobe91/32/1083_2.png) [@Mobe91](https://discourse.aurelia.io/u/Mobe91)\
**Post date:** [March 18, 2018, 3:42pm UTC](https://discourse.aurelia.io/t/how-to-use-primeelements-in-aurelia/911/11 "2018-03-18T15:42:11Z")

</div>

This is exactly the error that I mentioned in one of my [previous answers](https://discourse.aurelia.io/t/how-to-use-primeelements-in-aurelia/911/5).

I got the same version of primeelements working using script tags in a different app without Aurelia or SystemJS. As I said, `this.xtag.select`is a jQuery object. `puidropdown` is a function that would normally be registered with jQuery via the invocation of `$.widget("primeui.puidropdown", {...})` in primeui.js. Since this code is never invoked, the function is not registered, hence the error. The reason why it is not invoked must have to do with module loading.

---

<div class="post-metadata">

**Author:** ![zewa666](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/zewa666/32/19_2.png) [@zewa666](https://discourse.aurelia.io/u/zewa666)\
**Post date:** [March 18, 2018, 3:46pm UTC](https://discourse.aurelia.io/t/how-to-use-primeelements-in-aurelia/911/12 "2018-03-18T15:46:42Z")

</div>

So maybe adding jquery and not only xtags as dependencies solves that

---

<div class="post-metadata">

**Author:** ![Mobe91](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/mobe91/32/1083_2.png) [@Mobe91](https://discourse.aurelia.io/u/Mobe91)\
**Post date:** [March 18, 2018, 6:09pm UTC](https://discourse.aurelia.io/t/how-to-use-primeelements-in-aurelia/911/13 "2018-03-18T18:09:10Z")

</div>

No, the absence of jquery is not the issue (yet). The error that is produced in the sample project is because none of the factory methods in primeui.js containing the widget definitions are invoked.  
The code that is currently invoked in primeui.js merely exports the factory function for the widget:

```auto
module.exports = function(root, jQuery) {
        factory(jQuery);
        return jQuery;
      };

```

The key to getting this to work is to find a way to trigger the invocation of this exported function. I guess I would need to import this somewhere and somehow but how?

---

<div class="post-metadata">

**Author:** ![Alexander-Taran](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/alexander-taran/32/2308_2.png) [@Alexander-Taran](https://discourse.aurelia.io/u/Alexander-Taran)\
**Post date:** [March 18, 2018, 6:15pm UTC](https://discourse.aurelia.io/t/how-to-use-primeelements-in-aurelia/911/14 "2018-03-18T18:15:32Z")

</div>

> [@Mobe91](#):
>
> The key to getting this to work is to find a way to trigger the invocation of this exported function

it is the default export, I guess…  
so either `require('smthn')()`  
or

```auto
import * as fff from 'smthn'
fff()

```

I might be wrong with exact syntax but idea is that you import module and execute the returned value

---

<div class="post-metadata">

**Author:** ![zewa666](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/zewa666/32/19_2.png) [@zewa666](https://discourse.aurelia.io/u/zewa666)\
**Post date:** [March 18, 2018, 6:44pm UTC](https://discourse.aurelia.io/t/how-to-use-primeelements-in-aurelia/911/15 "2018-03-18T18:44:37Z")

</div>

I think this is exactly what the linked SO issue is talking about

---

<div class="post-metadata">

**Author:** ![Mobe91](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/mobe91/32/1083_2.png) [@Mobe91](https://discourse.aurelia.io/u/Mobe91)\
**Post date:** [March 18, 2018, 7:58pm UTC](https://discourse.aurelia.io/t/how-to-use-primeelements-in-aurelia/911/16 "2018-03-18T19:58:11Z")

</div>

I now changed my main.ts to the following:

```javascript
import 'bootstrap';
import {Aurelia} from 'aurelia-framework';
import * as $ from 'jquery';
import * as primeui from 'primeui';

export function configure(aurelia: Aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging();

  primeui(null, $);

  aurelia.start().then(() => aurelia.setRoot());
}

```

This appears to go in the right direction but now I get the following error:

```auto
ERROR [app-router] Error: (SystemJS) require is not a function
	TypeError: require is not a function
	    at eval (http://localhost:9000/jspm_packages/npm/primeui@4.1.15/primeui.js:11349:4)
	    at eval (<anonymous>)
	    at r (http://localhost:9000/jspm_packages/npm/bluebird@3.4.1/js/browser/bluebird.min.js:33:7722)
	    at i._settlePromiseFromHandler (http://localhost:9000/jspm_packages/npm/bluebird@3.4.1/js/browser/bluebird.min.js:32:13044)
	    at i._settlePromise (http://localhost:9000/jspm_packages/npm/bluebird@3.4.1/js/browser/bluebird.min.js:32:13847)
	Evaluating http://localhost:9000/jspm_packages/npm/primeui@4.1.15/primeui.js
	Error loading http://localhost:9000/jspm_packages/npm/primeui@4.1.15/primeelements.js
	    at eval (http://localhost:9000/jspm_packages/npm/primeui@4.1.15/primeui.js:11349:4)
	    at eval (<anonymous>)
	    at r (http://localhost:9000/jspm_packages/npm/bluebird@3.4.1/js/browser/bluebird.min.js:33:7722)
	    at i._settlePromiseFromHandler (http://localhost:9000/jspm_packages/npm/bluebird@3.4.1/js/browser/bluebird.min.js:32:13044)
	    at i._settlePromise (http://localhost:9000/jspm_packages/npm/bluebird@3.4.1/js/browser/bluebird.min.js:32:13847)
	Evaluating http://localhost:9000/jspm_packages/npm/primeui@4.1.15/primeui.js
	Error loading http://localhost:9000/jspm_packages/npm/primeui@4.1.15/primeelements.js

```

---

<div class="post-metadata">

**Author:** ![zewa666](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/zewa666/32/19_2.png) [@zewa666](https://discourse.aurelia.io/u/zewa666)\
**Post date:** [March 18, 2018, 9:02pm UTC](https://discourse.aurelia.io/t/how-to-use-primeelements-in-aurelia/911/17 "2018-03-18T21:02:00Z")

</div>

Sounds like it picked up the wrong Module Format. But since you’ve shimmed it as global cant you access that directly from window and initialize it that way?

---

<div class="post-metadata">

**Author:** ![Mobe91](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/mobe91/32/1083_2.png) [@Mobe91](https://discourse.aurelia.io/u/Mobe91)\
**Post date:** [March 19, 2018, 5:37am UTC](https://discourse.aurelia.io/t/how-to-use-primeelements-in-aurelia/911/18 "2018-03-19T05:37:26Z")

</div>

The format of primeui.js seems to be “cjs” - at least that is written at the beginning of the file. How would I access this from window? At least `window.primeui` is undefined…

---

<div class="post-metadata">

**Author:** ![zewa666](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/zewa666/32/19_2.png) [@zewa666](https://discourse.aurelia.io/u/zewa666)\
**Post date:** [March 19, 2018, 7:11am UTC](https://discourse.aurelia.io/t/how-to-use-primeelements-in-aurelia/911/19 "2018-03-19T07:11:21Z")

</div>

As far as I remember your shim you defined the global as PUI in config.js right?

---

<div class="post-metadata">

**Author:** ![Mobe91](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/mobe91/32/1083_2.png) [@Mobe91](https://discourse.aurelia.io/u/Mobe91)\
**Post date:** [March 19, 2018, 12:55pm UTC](https://discourse.aurelia.io/t/how-to-use-primeelements-in-aurelia/911/20 "2018-03-19T12:55:09Z")

</div>

Thanks, I managed to go one step further ^^

Using:

```javascript
import 'bootstrap';
import {Aurelia} from 'aurelia-framework';
import * as $ from 'jquery';

export function configure(aurelia: Aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging();

  System.import('primeui').then(function (primeui) { 
	primeui(null, $);
  }).then(function() {
	aurelia.start().then(() => aurelia.setRoot());
  });  
}

```

I managed to load and invoke the primeui factory - but only the last one!  
I also know why:  
primeui.js is built up like this:

```javascript
"format cjs";
(function(process) {
  // widget puitree
  (function(factory) {
    if (typeof define === 'function' && define.amd) {
      define(['jquery'], factory);
    } else if (typeof module === 'object' && module.exports) {
      module.exports = function(root, jQuery) {
        factory(jQuery);
        return jQuery;
      };
    } else {
      factory(jQuery);
    }
  }(function($) {
    $.widget("primeui.puitree", {
    ...
  }));
  // widget puitreetable
  (function(factory) {
    if (typeof define === 'function' && define.amd) {
      define(['jquery'], factory);
    } else if (typeof module === 'object' && module.exports) {
      module.exports = function(root, jQuery) {
        factory(jQuery);
        return jQuery;
      };
    } else {
      factory(jQuery);
    }
  }(function($) {
    $.widget("primeui.puitreetable", {
    ....
  }));
})(require('process'));

```

As you can see, there is one widget factory after the other. At the time of module loading, the

```auto
module.exports = <factory-method>

```

are executed sequentially from top to bottom. So each factory definition overwrites the module.export of its predecessor and so the last definition wins. I have no idea how this is supposed to work.

Any ideas?

[Next page](https://discourse.aurelia.io/t/how-to-use-primeelements-in-aurelia/911.md?page=2)