Using the unpkg CDN to serve the Lit 3.0 my-element demo

With Lit 2.0 we could publish a web component to npm and use it via a script tag like this one.

<script src="https://unpkg.com/@fireflysemantics/fs-gist"></script>

That component is from this package.

This are the relevant properties in package.json.

  "main": "fs-gist.bundle.js",
  "module": "fs-gist.js",
  "types": "fs-gist.d.ts",
  "type": "module",

I tried doing the same thing with the my-element demo in for the Lit 3.0 TypeScript starter.

This is the GitHub repository for the test. I published it to npm under the name @fireflysemantics/wctest.

The relevant package.json properties are:

  "main": "my-element.bundled.js",
  "module": "my-element.js",
  "types": "my-element.d.ts",
  "type": "module",

When I try to use the element rollup bundle over the npm CDN it does not render: StackBlitz.

Any ideas?

Solution

I can't see your bundler config, but it seems like you're outputting a standard JS module (there's an export statement in the bundle), but you're not including type="module" on the script tag, so the script is failing.

Stackblitz is behaving very weird: it doesn't seem to be respecting type="module" for some reason.

If you pull your sample into the lit.dev playground and add type="module" it works: https://lit.dev/playground/#project=W3sibmFtZSI6ImluZGV4Lmh0bWwiLCJjb250ZW50IjoiPHNjcmlwdCB0eXBlPVwibW9kdWxlXCIgc3JjPVwiaHR0cHM6Ly91bnBrZy5jb20vQGZpcmVmbHlzZW1hbnRpY3Mvd2N0ZXN0XCI-PC9zY3JpcHQ-XG5cbjxib2R5IHN0eWxlPVwiaGVpZ2h0OiAxMDB2aFwiPlxuICA8bXktZWxlbWVudD48L215LWVsZW1lbnQ-XG48L2JvZHk-XG4ifSx7Im5hbWUiOiJwYWNrYWdlLmpzb24iLCJjb250ZW50Ijoie1xuICBcImRlcGVuZGVuY2llc1wiOiB7XG4gICAgXCJsaXRcIjogXCJeMy4wLjBcIixcbiAgICBcIkBsaXQvcmVhY3RpdmUtZWxlbWVudFwiOiBcIl4yLjAuMFwiLFxuICAgIFwibGl0LWVsZW1lbnRcIjogXCJeNC4wLjBcIixcbiAgICBcImxpdC1odG1sXCI6IFwiXjMuMC4wXCJcbiAgfVxufSIsImhpZGRlbiI6dHJ1ZX1d