Uncaught TypeError: Failed to resolve module specifier "lit/directives/class-map.js

[kentskyo]

Unbundled testing with Express

Use the npm installation instructions and defining a static path in express:

app.use('/shoelace', express.static(__dirname + '/node_modules/@shoelace-style/shoelace'));

link references work fine:

    <link
      rel="stylesheet"
      media="(prefers-color-scheme:light)"
      href="/shoelace/dist/themes/light.css"
    />
    <link
      rel="stylesheet"
      media="(prefers-color-scheme:dark)"
      href="/shoelace/dist/themes/dark.css"
      onload="document.documentElement.classList.add('sl-theme-dark');"
    />

But when the shoelace script is executed:

<script type="module" src="/shoelace/dist/shoelace.js"></script>

I get the following error:

Uncaught TypeError: Failed to resolve module specifier "lit/directives/class-map.js". Relative references must start with either "/", "./", or "../".

Browser / OS

• OS: Windows 11
• Browser: Chrome
• Browser version: 118.0.5993.90
• Node: 20.9.0
• Express: 4.18.2

[KonnorRogers]

Try using /cdn instead of /dist. Because you're not piping through a bundler, its not going to resolve any "bare module specifiers"

- <script type="module" src="/shoelace/dist/shoelace.js"></script>
+ <script type="module" src="/shoelace/cdn/shoelace.js"></script>

[kentskyo]

That works, thanks.

[arogers-enthink]

Recommend adjusting content under NPM Installation

[dazraf]

Does anyone know how to use shoelace with Bun? The bare imports are causing some headache and I really don't want to use a CDN as my app will be run within a local network with no way of connecting the public internet. Thanks in advance!

[claviska]

You can safely import from the cdn folder. It's identical to dist except all the dependencies are bundled. It should probably be named dist-unbundled instead.

[claviska]

Sorry, I didn't notice the Bun part until just now. I haven't used Bun yet, but I'd be interested to know what's going on when you try to import from it. (It's probably best to open a separate discussion so we can triage/diagnose it.)

[dazraf]

Thanks very much @claviska, the cdn package worked!