dynamic import()

[HubbGit]

Static import working fine

<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.12.0/cdn/shoelace-autoloader.js"></script>

While dynamic import("https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.12.0/cdn/shoelace-autoloader.js") does not work
In this case I have a couple of errors in log such as indicated below

How is it possible to use dynamic import() ?

   GET https://cdn.jsdelivr.net/components/dialog/dialog.js net::ERR_ABORTED 404 (Not Found)

(anonymous) @ shoelace-autoloader.js:33
register @ shoelace-autoloader.js:32
(anonymous) @ shoelace-autoloader.js:24
discover @ shoelace-autoloader.js:24
(anonymous) @ shoelace-autoloader.js:36
shoelace-autoloader.js:33

   GET https://cdn.jsdelivr.net/components/select/select.js net::ERR_ABORTED 404 (Not Found)

(anonymous) @ shoelace-autoloader.js:33
register @ shoelace-autoloader.js:32
(anonymous) @ shoelace-autoloader.js:24
discover @ shoelace-autoloader.js:24
(anonymous) @ shoelace-autoloader.js:36
shoelace-autoloader.js:33

   GET https://cdn.jsdelivr.net/components/option/option.js net::ERR_ABORTED 404 (Not Found)

(anonymous) @ shoelace-autoloader.js:33
register @ shoelace-autoloader.js:32
(anonymous) @ shoelace-autoloader.js:24
discover @ shoelace-autoloader.js:24
(anonymous) @ shoelace-autoloader.js:36
shoelace-autoloader.js:33

   GET https://cdn.jsdelivr.net/components/input/input.js net::ERR_ABORTED 404 (Not Found)

(anonymous) @ shoelace-autoloader.js:33
register @ shoelace-autoloader.js:32
(anonymous) @ shoelace-autoloader.js:24
discover @ shoelace-autoloader.js:24
(anonymous) @ shoelace-autoloader.js:36
shoelace-autoloader.js:33

   GET https://cdn.jsdelivr.net/components/switch/switch.js net::ERR_ABORTED 404 (Not Found)

(anonymous) @ shoelace-autoloader.js:33
register @ shoelace-autoloader.js:32
(anonymous) @ shoelace-autoloader.js:24
discover @ shoelace-autoloader.js:24
(anonymous) @ shoelace-autoloader.js:36
shoelace-autoloader.js:33

   GET https://cdn.jsdelivr.net/components/button/button.js net::ERR_ABORTED 404 (Not Found)

(anonymous) @ shoelace-autoloader.js:33
register @ shoelace-autoloader.js:32
(anonymous) @ shoelace-autoloader.js:24
discover @ shoelace-autoloader.js:24
(anonymous) @ shoelace-autoloader.js:36

[claviska]

You'll need to set the base path so the autoloader knows where to find things. This is done for you if you use the CDN tags, but when importing via bundler or dynamically, the library has no way to know where to look.

<!-- Theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.12.0/cdn/themes/light.css" />

<sl-button>Click me</sl-button>

<script type="module">
  // Set the base path
  import('https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.12.0/cdn/utilities/base-path.js').then(({ setBasePath }) => {
    setBasePath('https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.12.0/cdn/'); 
  }); 

  // Autoloader
  import("https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.12.0/cdn/shoelace-autoloader.js");
</script>