Hyperhtml: hyperhtml.js:909 Uncaught TypeError: template.join is not a function

Created on 3 Aug 2017 · 12Comments · Source: WebReflection/hyperHTML

I'm trying to get a simple example working inside of a custom element:

connectedCallback() {
    this.innerHTML = `<div id="hyper-test"></div>`;
    hyperHTML(document.getElementById('hyper-test'));
}

It throws:

hyperhtml.js:909 Uncaught TypeError: template.join is not a function

help wanted invalid

Source

lastmjs

All 12 comments

The template variable that is supposed to have the join function is indeed my <div id="hyper-test"></div>.

lastmjs on 3 Aug 2017

Could I get some help on this?

lastmjs on 3 Aug 2017

This is not a hyperHTML bug unless:

you provide a whole example I can understand
you have read all the examples related to custom elements

WebReflection on 3 Aug 2017

also ... this ?

hyperHTML(document.getElementById('hyper-test'));

that is not how you use hyperHTML.

GETTING_STARTED here

DEEP_DIVE there.

You need to bind a context or nothing happens.

You need to understand the basic API before you can use it.

Now I see why you complained about the module style without ever having even used hyperHTML.

I hope you'll find those links a good getting-started, please stop filing bugs unless you have done basic homework like you have to do for any library or framework out there, thank you!

WebReflection on 3 Aug 2017

😕1 👍1

I'll simplify it:

<!DOCTYPE html>

<html>
    <head>
        <script src="node_modules/hyperhtml/hyperhtml.js"></script>
    </head>

    <body>
        <div id="hyper-test"></div>

        <script>
            hyperHTML(document.getElementById('hyper-test'));
        </script>
    </body>
</html>

This throws:

Uncaught TypeError: template.join is not a function

lastmjs on 3 Aug 2017

Sorry, I just read what you posted before this, I'll look into that.

lastmjs on 3 Aug 2017

Yeah, and it will throw forever until you read the most basic documentation about hyperHTML

WebReflection on 3 Aug 2017

Shoot, I just missed the bind function. It's working now, thanks! Sorry about that.

lastmjs on 3 Aug 2017

an empty bind means nothing anyway ... keep reading

WebReflection on 3 Aug 2017

the following would be already an improvement

connectedCallback() {
  hyperHTML.bind(this)`
  <div id="hyper-test"></div>`;
}

but if you use hyperHTML as plain substitute of innerHTML you are not using its potentials at all.

The documentation is what I'm working on and what is my Patreon about.

It's not perfect now, but there are tons of examples and documents already.

WebReflection on 3 Aug 2017

👍1

Don't worry, I have big plans for hyperHTML. I'm hoping to replace Polymer's data binding completely if possible, and rid myself of that dependency.

lastmjs on 3 Aug 2017

with even less documentation at this stage, this class helped me creating all Polymer counter examples.

Happy to give hints in DM, if necessary.

WebReflection on 3 Aug 2017

Was this page helpful?

0 / 5 - 0 ratings