How to properly import and use web components?

Help Requests
1

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

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:

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 :slight_smile:

2

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?

1 Like
3

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 :slight_smile:

1 Like
4

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
        }
      ]
    },
1 Like
5

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

import '@github/time-elements';

3 Likes
6

@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

1 Like
7

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.

1 Like
8

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?

1 Like
9

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 :slight_smile:

Thanks again!!

3 Likes
10

Glad you figured it out!

1 Like
11

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

1 Like