Relative References Must Start With Either "/", "./", Or "../"

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 re

Solution 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

Solution 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