29

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);
Penny Liu
  • 15,447
  • 5
  • 79
  • 98
Senthil
  • 961
  • 1
  • 8
  • 21
  • 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 Jun 08 '19 at 15:04
  • 1
    It means `'lit-element'` needs to be a relative path eg `'../lit-element'` – Patrick Evans Jun 08 '19 at 15:05

4 Answers4

19

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

Alan Dávalos
  • 2,568
  • 11
  • 19
1

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.

oxk4r
  • 452
  • 6
  • 17
-1
  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
user16217248
  • 3,119
  • 19
  • 19
  • 37
fa esavand
  • 11
  • 2
  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jun 18 '23 at 07:31
-2

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

PepsiGoose
  • 377
  • 3
  • 4