simonw•10mo ago

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

2 Replies

Deno AI Helper•10mo 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.

Helpful Links: Frequently Asked Questions | Deno Docs Deno 1.38: HTML doc generator and HMR How to publish Deno modules to NPM npm: specifiers | Deno Docs

simonwOP•10mo 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...