# How to properly import and use web components?

**URL:** <https://discourse.aurelia.io/t/how-to-properly-import-and-use-web-components/3417>\
**Category:** Help Requests\
**Created:** [April 22, 2020, 2:04pm UTC](https://discourse.aurelia.io/t/how-to-properly-import-and-use-web-components/3417 "2020-04-22T14:04:32Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![ailerua](https://avatars.discourse-cdn.com/v4/letter/a/dc4da7/32.png) [@ailerua](https://discourse.aurelia.io/u/ailerua)\
**Post date:** [April 22, 2020, 2:04pm UTC](https://discourse.aurelia.io/t/how-to-properly-import-and-use-web-components/3417/1 "2020-04-22T14:04:32Z")

</div>

I have found several nice web components which I would like to use with Aurelia, but I am puzzled how should I import and use them. I was really surprised that the documentation has no examples on it.

OK, here we go. I wanted to use relative-time from time-elements [https://github.com/github/time-elements](https://github.com/github/time-elements)

First I installed it using `npm install @github/time-elements` in my Aurelia project root. Then I tried several ways to include it, e.g. in my component class:

```auto
import { relativeTime } from '@github/time-elements'; 
// or
import { relativeTime } from '../../node_modules/@github/time-elements/dist/time-elements';

```

First one yields error `aurelia-templating-router.ts:17 GET http://localhost:9000/src/@github/time-elements.js net::ERR_ABORTED 404 (Not Found)` in the browser, second one parse error in terminal.

Also tried `<require>` tag in the view. But I cannot find the way for `<relative-time datetime="2020-01-31T16:30:00-08:00"></relative-time>` in template to yield any output in the browser. Is something missing, should I register the element somehow?

PS! It is one example. The question is what is a proper way to use a standardised web component in Aurelia project (be it time-elements or something else)? I know there is a tutorial for polymer but for a newbie like me it is not clear how can I adapt it to any standard web component.

Any comments and help much appreciated. I love Aurelia so far 🙂

---

<div class="post-metadata">

**Author:** ![khuongduybui](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/khuongduybui/32/44_2.png) [@khuongduybui](https://discourse.aurelia.io/u/khuongduybui)\
**Post date:** [April 23, 2020, 1:23am UTC](https://discourse.aurelia.io/t/how-to-properly-import-and-use-web-components/3417/2 "2020-04-23T01:23:42Z")

</div>

I think to debug the import / require issue we need to know how your Aurelia project is set up.

Is it using require, system, webpack, or dumber?

---

<div class="post-metadata">

**Author:** ![ailerua](https://avatars.discourse-cdn.com/v4/letter/a/dc4da7/32.png) [@ailerua](https://discourse.aurelia.io/u/ailerua)\
**Post date:** [April 23, 2020, 9:52am UTC](https://discourse.aurelia.io/t/how-to-properly-import-and-use-web-components/3417/3 "2020-04-23T09:52:02Z")

</div>

I used the setup guide in the tutorial, no idea what kind of configuration it creates, how could I check?

Perhaps this is another issue why Aurelia has not gained so much attention as it deserves - the documentation is somewhat incoherent. The _Getting started_ just says to `npm install -g aurelia-cli` then `au new` and then `au run --watch`. No disucussion about what is going on under the hood. And then suddenly the rest of documentation is full of references like “_if you are using Webpack_” or “_in case of jspm_”. Yes, for people with lots of experience on JS this might be trivial to figure out, but for many this is a barrier actually. This is constructive criticism, not blaming I hope 🙂

---

<div class="post-metadata">

**Author:** ![ailerua](https://avatars.discourse-cdn.com/v4/letter/a/dc4da7/32.png) [@ailerua](https://discourse.aurelia.io/u/ailerua)\
**Post date:** [April 23, 2020, 9:55am UTC](https://discourse.aurelia.io/t/how-to-properly-import-and-use-web-components/3417/4 "2020-04-23T09:55:58Z")

</div>

After searching in the project I found that _require_ is referenced in aurelia.json file. Is this what you were asking?

```
   "loader": {
      "type": "require",
      "configTarget": "vendor-bundle.js",
      "includeBundleMetadataInConfig": "auto",
      "plugins": [
        {
          "name": "text",
          "extensions": [
            ".html",
            ".css"
          ],
          "stub": true
        }
      ]
    },
```

---

<div class="post-metadata">

**Author:** ![atpw25](https://avatars.discourse-cdn.com/v4/letter/a/a9a28c/32.png) [@atpw25](https://discourse.aurelia.io/u/atpw25)\
**Post date:** [April 23, 2020, 3:49pm UTC](https://discourse.aurelia.io/t/how-to-properly-import-and-use-web-components/3417/5 "2020-04-23T15:49:09Z")

</div>

Add the following line to main.js. It should auto configure the web components.

`import '@github/time-elements';`

---

<div class="post-metadata">

**Author:** ![magnusdanielson](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/magnusdanielson/32/924_2.png) [@magnusdanielson](https://discourse.aurelia.io/u/magnusdanielson)\
**Post date:** [April 23, 2020, 9:38pm UTC](https://discourse.aurelia.io/t/how-to-properly-import-and-use-web-components/3417/6 "2020-04-23T21:38:44Z")

</div>

@atpw25 is right.  
I have tested below and it works for me in Chrome version 81.  
I created a new project with `au new` and selected Typescript Webpack.  
Then you need to `npm install @github/time-elements`  
If you look at the source code for the elements, they actually self register so all you need is below into your main.ts  
import ‘@github/time-elements’;  
And then in your app.html you add  
`<time-ago datetime="2012-04-01T16:30:00-08:00">`  
`Any text`  
`</time-ago>`

And in my browser i get:  
`för 8 år sedan`

---

<div class="post-metadata">

**Author:** ![ailerua](https://avatars.discourse-cdn.com/v4/letter/a/dc4da7/32.png) [@ailerua](https://discourse.aurelia.io/u/ailerua)\
**Post date:** [April 23, 2020, 10:13pm UTC](https://discourse.aurelia.io/t/how-to-properly-import-and-use-web-components/3417/7 "2020-04-23T22:13:34Z")

</div>

Thank you! I will look into this. To my best knowledge, I have not made any changes to project configuration, yet when I repeat exactly the same process I will end up with this error in the console:

`File not found or not accessible: /path/to/project/src/@github/time-elements.js. Requested by /path/to/project/src/main.js`

It somehow is looking the dependency under `src` not under `node_modules`… I am puzzled. The only difference is that I have ESNext project, not TypeScript one.

---

<div class="post-metadata">

**Author:** ![ailerua](https://avatars.discourse-cdn.com/v4/letter/a/dc4da7/32.png) [@ailerua](https://discourse.aurelia.io/u/ailerua)\
**Post date:** [April 23, 2020, 10:48pm UTC](https://discourse.aurelia.io/t/how-to-properly-import-and-use-web-components/3417/8 "2020-04-23T22:48:41Z")

</div>

I have now created 2 new Aurelia projects (1 with ESNext, 1 using TS) using `au new` for both, accepting default options. Then done exactly as you to install and use time-elements. Still getting the error on both occasions. I am pasting the full startup log for `au run --watch` in case you can spot anything

```
$ au run --watch
Starting 'readProjectConfiguration'...
Finished 'readProjectConfiguration'
Starting 'processMarkup'...
Starting 'processCSS'...
Starting 'copyFiles'...
Starting 'configureEnvironment'...
Finished 'copyFiles'
Finished 'processCSS'
Finished 'processMarkup'
Finished 'configureEnvironment'
Starting 'buildTypeScript'...
Finished 'buildTypeScript'
Starting 'writeBundles'...
Tracing app...
Tracing environment...
Tracing main...
File not found or not accessible: /path/to/project/src/@github/time-elements.js. Requested by /path/to/project/src/main.js
File not found or not accessible: /path/to/project/src/@github/time-elements.js. Requested by /path/to/project/src/main.js
Tracing resources/index...
Tracing app...
Tracing aurelia-binding...
Tracing aurelia-bootstrapper...
Tracing aurelia-dependency-injection...
Tracing aurelia-event-aggregator...
Tracing aurelia-framework...
Tracing aurelia-history...
Tracing aurelia-history-browser...
Tracing aurelia-loader-default...
Tracing aurelia-logging-console...
Tracing aurelia-pal-browser...
Tracing aurelia-route-recognizer...
Tracing aurelia-router...
Tracing aurelia-templating-binding...
Tracing text...
Tracing aurelia-templating-resources...
Tracing aurelia-templating-router...
Tracing aurelia-testing...
Writing app-bundle.js...
Writing vendor-bundle.js...
Finished 'writeBundles'
Application Available At: http://localhost:9000
BrowserSync Available At: http://localhost:3001

```

where `/path/to/project` is the root of Aurelia project. This really blows my mind. I am using Ubuntu 18.04 and npm is latest 6.14.4. Any ideas?

---

<div class="post-metadata">

**Author:** ![ailerua](https://avatars.discourse-cdn.com/v4/letter/a/dc4da7/32.png) [@ailerua](https://discourse.aurelia.io/u/ailerua)\
**Post date:** [April 24, 2020, 12:48am UTC](https://discourse.aurelia.io/t/how-to-properly-import-and-use-web-components/3417/9 "2020-04-24T00:48:54Z")

</div>

Thanks everyone who contributed! I solved my m-y-s-t-e-r-y! I cannot believe how many hours went wasted because of…

Well, I tried Aurelia back in 2017, installed and forgot. Now I started from scratch, installing aurelia-cli again and all. The reason for my current problem was in this old CLI!

`au new` created me an old 2017 skeleton. The reason was that in 2017 it had installed itself under `/usr/local/lib/node_modules/au..` being the ONLY app there. New and current version of `au` was under `/usr/lib/node_modules`. I had tried `npm update aurelia-cli -g` just to make sure I was using the latest… and still got version 0.28 (without knowing it). Discussion about creating webpack configuration finally led me to it’s traces as my project clearly was no webpack 🙂

Thanks again!!

---

<div class="post-metadata">

**Author:** ![khuongduybui](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/khuongduybui/32/44_2.png) [@khuongduybui](https://discourse.aurelia.io/u/khuongduybui)\
**Post date:** [April 24, 2020, 5:56am UTC](https://discourse.aurelia.io/t/how-to-properly-import-and-use-web-components/3417/10 "2020-04-24T05:56:42Z")

</div>

Glad you figured it out!

---

<div class="post-metadata">

**Author:** ![magnusdanielson](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/magnusdanielson/32/924_2.png) [@magnusdanielson](https://discourse.aurelia.io/u/magnusdanielson)\
**Post date:** [April 24, 2020, 7:45am UTC](https://discourse.aurelia.io/t/how-to-properly-import-and-use-web-components/3417/11 "2020-04-24T07:45:31Z")

</div>

Excellent! Keeping up-to-date is important regardless of framework.