typescript - How to add Shoelace library of components to existing Stencil.js project

0
votes

There is a library called "shoelace" ( https://shoelace.style/getting-started/usage ) which is a collection of web components built with stencil.js. I would like to use the components from that library inside of my existing stencil.js project.

However, when I follow the instructions for a local installation using NPM, it doesn't work, even though the component appears to be loaded.

I receive the following error when I try to render shoelace's button component: Class constructor SlButton cannot be invoked without 'new'

This is my test-button.tsx component:

import { Component, h} from '@stencil/core';

import '@shoelace-style/shoelace/dist/themes/base.css';

import SlButton from '@shoelace-style/shoelace/dist/components/button/button';


@Component({
  tag: 'test-button',
  shadow: true,
})

export class TestButton {

  render() {

    return (
      <div>
        <SlButton>hdcsddsy</SlButton>
      </div>
    );
  }
}

What is wrong here?

typescriptimportweb-componentstenciljsshoelace