Vendure Admin UI扩展中React组件构建失败求助

我按照官方文档创建了一个简单的React组件，但构建一直失败。即使在全新的Vendure项目中添加该组件，问题依然存在。

组件代码（Greeter.tsx） #

import React from 'react';

export function Greeter() {
    const greeting = 'Hello!';
    return (
        <div className="page-block">
            <h2>{greeting}</h2>
        </div>
    );
}

Vendure UI扩展配置 #

static ui: AdminUiExtension = {
    id: 'linked-products-ui',
    extensionPath: path.join(__dirname, 'ui'),
    routes: [{ route: 'linked-products', filePath: 'routes.ts' }],
    providers: ['providers.ts'],
};

组件注册代码（routes.ts） #

import { registerReactRouteComponent } from '@vendure/admin-ui/react';
import {Greeter} from "./components/Greeter";

export default [
    registerReactRouteComponent({
        component: Greeter,
        path: '',
        title: 'Greeter Page',
        breadcrumb: 'Greeter',
    }),
];

报错信息 #

[server] Warning: /Users/.../Documents/projects/my-shop/node_modules/@vendure/admin-ui/fesm2022/vendure-admin-ui-react.mjs depends on 'react-dom/client'. CommonJS or AMD dependencies can cause optimization bailouts.
[server] Error: src/extensions/linked-products-ui/components/Greeter.tsx:6:9 - error TS2339: Property 'div' does not exist on type 'JSX.IntrinsicElements'.
[server] 6         <div className="page-block">
[server]           ~~~~~~~~~~~~~~~~~~~~~~~~~~~~
[server] Error: src/extensions/linked-products-ui/components/Greeter.tsx:7:13 - error TS2339: Property 'h2' does not exist on type 'JSX.IntrinsicElements'.
[server] 7             <h2>{greeting}</h2>
[server]               ~~~~
[server] Error: src/extensions/linked-products-ui/components/Greeter.tsx:7:27 - error TS2339: Property 'h2' does not exist on type 'JSX.IntrinsicElements'.
[server] 
[server] 7             <h2>{greeting}</h2>
[server] Error: src/extensions/linked-products-ui/components/Greeter.tsx:8:9 - error TS2339: Property 'div' does not exist on type 'JSX.IntrinsicElements'.
[server] 8         </div>

解决方案 #

这个错误是TypeScript无法识别React内置的JSX元素类型，按以下步骤修复：

1. 安装React类型定义
   执行命令补充缺失的类型依赖：

   npm install @types/react @types/react-dom --save-dev
   

2. 调整tsconfig.json配置
   确保你的TS配置包含以下关键设置：

   {
     "compilerOptions": {
       "jsx": "react-jsx", // React 17+推荐用这个，旧版本用"react"
       "lib": ["dom", "dom.iterable", "esnext"],
       "module": "esnext",
       "moduleResolution": "node",
       "target": "es2020"
     }
   }
   

   Vendure Admin UI基于Angular构建，必须保证JSX模式配置正确才能被编译器识别。

3. 确认文件后缀
   组件文件必须用.tsx后缀，不能用.ts，否则TypeScript不会处理JSX语法。

4. 消除CommonJS警告（可选）
   关于react-dom/client的警告不影响功能，若要消除，在angular.json的build配置里添加：

   "allowedCommonJsDependencies": ["react-dom/client"]
   

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