Relative references must start with either "/", "./", or "../"

Question

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);

Italianize

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(?). – Broida

It means 'lit-element' needs to be a relative path eg '../lit-element' – Brueghel

Answer 1

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

Kabyle

Answer 2

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.

Rhumb

Answer 3

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

Hypsography

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. – Miscellaneous

Answer 4

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

Bergmann