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

[h-archer]

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!

[h-archer]

Solved!

I had to cast to the correct class:

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