React-TSX项目使用Stencil Web Components遇类型错误的疑问

问题背景 #

在React JS中能正常使用Stencil组件库，但TSX中出现错误：

Property 'my-component' does not exist on type 'JSX.IntrinsicElements'.ts

手动在global.d.ts中声明组件类型可以解决，但希望无需手动操作。

解决步骤 #

1. 检查组件库的类型导出配置 #

首先确认@mycomponents的package.json里是否有types字段，指向Stencil生成的类型文件：

{
  "types": "./dist/types/components.d.ts"
}

如果没有这个字段，说明组件库打包时未正确导出类型，需要联系开发者修复，或者手动在项目配置中指定类型路径。

2. 调整项目tsconfig.json #

如果组件库已配置types字段，但TypeScript未识别，修改你的tsconfig.json：

• 确保compilerOptions.moduleResolution为node（默认值，若手动修改过需确认）
• 在include数组中显式包含组件库的类型文件：

{
  "include": [
    "src/**/*",
    "./node_modules/@mycomponents/dist/types/**/*.d.ts"
  ]
}

默认TypeScript会排除node_modules，所以必须显式添加这条路径。

3. 正确引入类型文件 #

若三斜线引用（/// <reference path='...' />）无效，在src/global.d.ts中直接导入类型文件：

import '@mycomponents/dist/types/components.d.ts';

Stencil生成的这个文件已经包含了JSX.IntrinsicElements的扩展，导入后TypeScript会自动识别组件类型。

4. （组件库开发者）确认Stencil配置 #

如果你是组件库的开发者，检查stencil.config.ts的outputTargets，确保开启类型生成：

export const config: Config = {
  outputTargets: [
    {
      type: 'dist',
      esmLoaderPath: '../loader',
      typescript: {
        declaration: true,
        declarationMap: true
      }
    }
  ]
};

验证操作 #

修改配置后，重启VS Code（或TypeScript语言服务），清空项目缓存（删除node_modules和.tsbuildinfo后重新安装依赖），再测试TSX中使用组件是否还会报错。

内容的提问来源于stack exchange，提问作者Daniel landete martinez