CODEWITHSUNDEEP
javascriptecmascript-6es6-moduleslit-element
alfredopacino
alfredopacino

Reputation: 3241

import module by name or by path

I'm not clear with the difference between importing a js module by name (like the common react or polymer lit-element usage) or by path (aka npm modules). What's the difference and why there is a difference in the first place? Why can't I import lit-element using:

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

like a normal npm module and use it in the browser without getting this error: Failed to resolve module specifier. Relative references must start with either "/", "./", or "../".?

Upvotes: 3

Views: 1809

Answers (1)

Bergi
Bergi

Reputation: 665546

Using ES6 module syntax in the browser is currently only supported with paths as specifiers because it's not yet clear how bare specifiers are going to get resolved to URLs.

  • Other specifiers are reserved for future-use, such as importing built-in modules.
  • The nodejs module resolution algorithm cannot be replicated because it requires testing for file existence, which is reasonable locally but not sensible over HTTP - and of course there's no node_modules folder anywhere.
  • Work is ongoing for allowing more elaborate solutions, e.g. module loaders or import maps. Paths were just the minimal viable solution that could be released to the public, while guaranteeing forward-compatibility.

Sources: [1], [2], [3]

Upvotes: 1

Related Questions