如何在现有Stencil.js项目中添加Shoelace组件库并解决引入报错

你犯了两个核心错误：

1. Shoelace是标准Web Components组件库，提供的是已经封装好的原生自定义元素，你不需要导入组件类当做JSX组件直接调用
2. 你导入的SlButton是ES6标准类，Stencil默认转译逻辑会把JSX中直接写的<SlButton>转为普通函数调用，而ES6类不允许不带new关键字调用，就触发了你看到的报错

按照下面三步修改即可：

第一步：调整Shoelace组件导入方式 #

不要直接导入组件类，改为导入自动注册版本的组件文件，导入后组件会自动注册为sl-*格式的原生标签：

// 原有错误导入删除
// import SlButton from '@shoelace-style/shoelace/dist/components/button/button';
// 改为下面的导入
import '@shoelace-style/shoelace/dist/components/button/button.js';

基础样式导入保持不变即可。

第二步：修改JSX渲染逻辑 #

不要在JSX中写<SlButton>，直接用已经注册好的原生自定义元素标签：

render() {
  return (
    <div>
      <sl-button>hdcsddsy</sl-button>
    </div>
  );
}

第三步：（可选，若修改后仍报错）调整Stencil编译配置 #

在项目根目录的stencil.config.ts中添加转译排除规则，避免Stencil把Shoelace的ES6代码转为ES5导致构造函数调用异常：

import { Config } from '@stencil/core';

export const config: Config = {
  // 其他原有配置保持不变
  transpileExclude: ['node_modules/@shoelace-style/**/*']
};

内容的提问来源于stack exchange，提问作者Bryan