How to use react components in Vendure Admin UI Extensions?

[frolkmedia]

I followed the guide from the documentation and created an empty component. But it doesn't build.
I specifically created an empty Vendure project and made such a simple component there. But even there it doesn’t work!

My component

import React from 'react';

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

my config

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

Component registration

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

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

Errors

[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] For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies
[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>

[michaelbromley]

Hi,

You'll need to install the @types/react package to resolve this. I'll make sure to add this to the docs.