Shoelace: Importing Custom Elements Using webpack... Does not work for me!

[hga77]

Describe the bug
Importing Custom Elements Using webpack does not work.

Hi,

Thanks for a great looking set of components. However I cannot get any components to work. :(

I tried everything to get this running after reading the docs here. I am working within a typescript project and using webpack.

Even the example webpack project fails (here).

For the example webpack project, I cloned the repo, then..
npm install
npm run start

I get the following errors:

WARNING in ./src/index.js 5:0-20 "export 'defineCustomElements' was not found in '@shoelace-style/shoelace/dist/custom-elements'

WARNING in ./src/index.js 4:0-12 "export 'setAssetPath' was not found in '@shoelace-style/shoelace/dist/custom-elements'

On my typescript project, I followed the instructions for importing the custom elements using webpack, and I get the same errors, along with another error. When using the setAssetPath like this (as per the docs):

import '@shoelace-style/shoelace/dist/shoelace/shoelace.css';
import { setAssetPath, SlButton, SlDropdown } from '@shoelace-style/shoelace';

setAssetPath(document.currentScript.src);
customElements.define('sl-button', SlButton);
customElements.define('sl-dropdown', SlDropdown);

I get this error also:

Property 'src' does not exist on type 'HTMLOrSVGScriptElement'.
Property 'src' does not exist on type 'SVGScriptElement'.ts(2339)

Can someone please help? I know I am missing something simple!

[claviska]

Confirmed. It looks like many of the custom elements dist files were missing in the beta19 build. If you use beta18 it works. This will also be fixed in beta20. Apologies for the trouble!

[hga77]

There was another issue here. But it's also solved. It's related to typescript.

I had to cast to the correct class:

setAssetPath( (document.currentScript as HTMLScriptElement).src );