I am newbie to lit-element, and when use import to include the library, I am getting error as:

Uncaught TypeError: Failed to resolve module specifier "lit-element". Relative references must start with either "/", "./", or "../".

Please provide any alternatives/solutions.

import { LitElement, html } from 'lit-element';

class MyElement extends LitElement {
  render(){
    return html`
      <div>
        <p>A paragraph</p>
      </div>
    `;
  }
}
customElements.define('my-element', MyElement);

I am newbie to lit-element, and when use import to include the library, I am getting error as:

Uncaught TypeError: Failed to resolve module specifier "lit-element". Relative references must start with either "/", "./", or "../".

Please provide any alternatives/solutions.

import { LitElement, html } from 'lit-element';

class MyElement extends LitElement {
  render(){
    return html`
      <div>
        <p>A paragraph</p>
      </div>
    `;
  }
}
customElements.define('my-element', MyElement);

• javascript
• lit-element
• polymer-3.x
• lit-html

• Simple Linux paths as suggested ./ current dir; / root dir; ../ parent dir. From error it looks like it should work with relative path to lit-element in your project or an URL to web source(?). – Jan Commented Jun 8, 2019 at 15:04
• 1 It means 'lit-element' needs to be a relative path eg '../lit-element' – Patrick Evans Commented Jun 8, 2019 at 15:05

4 Answers 4

This doesn't work because js imports must reference a specific file with either a relative path or an absolute path, assuming your project structure is something like the following:

/node_modules
  /lit-element
  /other-library
/src
  /components
    my-element.js
index.html

From my-element.js, your import would be

import {LitElement, html} from '../../node_modules/lit-element/lit-element.js'

However, since this kind of configuration is confusing and you'll probably end up setting a build script sometime too, the recommendation would be to keep your imports as they are right now and use a dev server that remaps your imports to node_modules like open-wc's web server

Update (Feb. 2021): The web server mentioned on this question has gone through a few iterations and improvements. The current package is @web/dev-server

As you probably know, this type of import is known as 'bare import':

import { LitElement, html } from 'lit-element';

And the error happens because web browsers cannot resolve bare imports by themselves.

I don't know what webserver are you using for developing, but a good way of avoid this type of warnings is choose one that could manage this type of imports, for example web-dev-server

There are other approaches, using, for example tools like Webpack, Polymer-cli, Open Web Components, etc, as this article explains, but, IMO, the web-dev-server option is a very good one for start.

1. import {LitElement, html, css} from 'https://cdn.jsdelivr.net/gh/lit/dist@2/core/lit-core.min.js';
   

2. Your files should be in index.js

You can serve bare module imports with polimer-cli.

a. install it: npm install --save-dev polymer-cli

b. Create polymer.json in your project with roughly contens:

{
    "entrypoint": "index.html",
    "shell": "app.js",
    "npm": true
}

c. do polymer serve