CODEWITHSUNDEEP
javascriptweb-componentlit-elementlit-html
Daniel Kehoe
Daniel Kehoe

Reputation: 10952

Lit-Html "object Object" code displays in the browser

My browser displays JavaScript code in the web page instead of the expected output from my custom element. The web page shows:

[object Object]

The code for the custom element is simple:

import { LitElement } from 'https://jspm.dev/[email protected]';
import { html } from 'https://jspm.dev/[email protected]';
export class MyFooter extends LitElement {
  createRenderRoot() {
    return this;
  }
  render(){
    return html`
      foobar
    `;
  }
}
customElements.define('my-footer', MyFooter);

I am not using Node, NPM, or any build tooling, just importing ES6 modules from the JSPM CDN to load JavaScript.

Upvotes: 3

Views: 1857

Answers (1)

Daniel Kehoe
Daniel Kehoe

Reputation: 10952

Answering my own question as it may be helpful for other devs encountering this problem.

The problem

Here’s the problem: In my custom element, I loaded lit-html more than once. One version of lit-html does not recognize the TemplateResult of the other and therefore renders JavaScript code instead of HTML. Importing LitElement implicitly loads the newest version of lit-html (which was version 1.3.0 at the time). Explicitly importing lit-html version 1.2.1 introduced a version conflict. In this case, the problem was caused by pinning versions and loading LitElement and lit-html in separate import statements. There are other situations where you may inadvertently load conflicting versions of lit-html.

The solution

There should always be only one version of lit-html. You can use the html directive multiple times in your code. But make sure the import statements only load one instance of lit-html.

Resolution

Here is an import expression that fixes the problem:

import { LitElement, html } from 'https://jspm.dev/[email protected]';

In the improved code, a single import statement loads LitElement and lit-html modules from the same source without a version clash.

More information

I've written an article that goes into more depth, describing other cases with Node and NPM, with lit-html directives such as until, and some general advice about specifying version ranges to avoid major breaking changes. Here's the article:

Troubleshooting Lit-Html: Code Displaying in the Browser

Upvotes: 10

Related Questions