Stuck trying to install a JSR package with its dependencies and use it in a browser

I published https://jsr.io/@datasette/table to JSR - an experimental web component package - and now I want to install and use it. I'm not at all fluent with the JavaScript ecosystem so I'm likely making some very basic mistakes Here are my notes on what I've tried so far - ideally I want to use esbuild for this: https://til.simonwillison.net/javascript/jsr-esbuild The error I'm seeing is this:
✘ [ERROR] Could not resolve "npm:lit@^2.2.7"

node_modules/@datasette/table/datasette-table.js:1:36:
1 │ import {LitElement, html, css} from 'npm:lit@^2.2.7';
╵ ~~~~~~~~~~~~~~~~

You can mark the path "npm:lit@^2.2.7" as external to exclude it from the bundle, which will
remove this error and leave the unresolved path in the bundle.

1 error
✘ [ERROR] Could not resolve "npm:lit@^2.2.7"

node_modules/@datasette/table/datasette-table.js:1:36:
1 │ import {LitElement, html, css} from 'npm:lit@^2.2.7';
╵ ~~~~~~~~~~~~~~~~

You can mark the path "npm:lit@^2.2.7" as external to exclude it from the bundle, which will
remove this error and leave the unresolved path in the bundle.

1 error
@datasette/table - JSR
@datasette/table on JSR
Using packages from JSR with esbuild
JSR is a brand new package repository for "modern JavaScript and TypeScript", launched on March 1st by the Deno team as a new alternative to npm
DAH
Deno AI Helper51d ago
I wasn't able to find the answer to your question in the official Deno documentation. However, based on the error message you've provided, it seems like esbuild is unable to resolve the lit package with the version specifier ^2.2.7. The import statement you're using is trying to import from a path that looks like a package specifier typically used with Node.js package managers like npm, but it's not a standard ES module path. The syntax npm:lit@^2.2.7 is not a standard import specifier that would be recognized by ES module systems or build tools like esbuild without additional configuration. If you're using esbuild, you might need to install the lit package using a package manager like npm or yarn and then import it using a standard path, like so:
import { LitElement, html, css } from 'lit';
import { LitElement, html, css } from 'lit';
Please note that this advice is not based on the Deno documentation, and I would advise you to double-check the accuracy of this advice. If you continue to experience issues, you might want to consult the documentation for esbuild or seek assistance from the community around that tool.
S
simonw51d ago
This may be a bug - filed an issue here https://github.com/jsr-io/jsr/issues/139
GitHub
Something rewrote my import to from 'npm:lit@^2.2.7'; and now I c...
My original source code here: https://github.com/simonw/datasette-table/blob/0.1.0/datasette-table.js import {LitElement, html, css} from 'lit'; After I published it to jsr.io it was rewrit...