5 ms·
When one writes `import 'lit'` the browser doesn't know where Lit is. This is called a bare module specifier vs an absolute import specifier: import '/home/u
by e111077 4y ago
When one writes `import 'lit'` the browser doesn't know where Lit is. This is called a bare module specifier vs an absolute import specifier:
import '/home/user/project/node_modules/lit/index.js'
A relative specifier:
import '../node_modules/lit/index.js'
Or a URL Specifier:
import 'https://unpkg.com/lit?module'
So you have four-ish options to tell the browser where to look for 'lit':
1. Use a server that will use the node module resolution algorithm and transforms it to a relative specifier as it encounters the import (transform/build-ish?)
2. Use experimental "import maps" to go fully buildless to tell the browser where to point that bare module to (buildless)
3. Bundle all your code (build step)
4. Use a bundle from a CDN
Here are some examples of each:
Server that transforms import specifiers (lit.dev does this by default):
https://lit.dev/playground/#gist=9092862a77acf73dd1e6faa73a326be9 https://lit.dev/playground/#gist=9092862a77acf73dd1e6faa73a3... (build-ish)
Import Maps (2):
https://lit.dev/playground/#gist=0c4f66396b333c82cb27e7dd3b2129c0 https://lit.dev/playground/#gist=0c4f66396b333c82cb27e7dd3b2... (buildless)
https://lit.dev/playground/#gist=91c0b286698612b013eb81881ffdfeb2 https://lit.dev/playground/#gist=91c0b286698612b013eb81881ff... (build-ish)
Url Specifiers (2):
https://lit.dev/playground/#gist=05655736300f0425644e61a626410aef https://lit.dev/playground/#gist=05655736300f0425644e61a6264... (buildless)
https://lit.dev/playground/#gist=6d23e8e8dadacd7488bdec81d0f6aa78 https://lit.dev/playground/#gist=6d23e8e8dadacd7488bdec81d0f... (build-ish)
hope this helps with some of your questions
- mtlynch 4y agoCool, appreciate the thorough answer! I'll give Lit another look now that I understand how to run it buildless + static.