Unabled to create new Admin UI routes using React

[bentouch-digital]

Describe the bug
Hello, while following the documentation found here I came across an issue when trying to create a new route in the Admin UI using React.
After creating the files required to add the new route, starting Vendure using npm run dev will result in multiple errors like the following :

 Error: src/extensions/greeter/components/Greeter.tsx:6:9 - error TS2339: Property 'div' does not exist on type 'JSX.IntrinsicElements'

This result in the Admin UI not working at all.

To Reproduce

1. Create a new Vendure project using npx @vendure/create vendure
2. Start creating a new Admin UI extension using npx vendure add and selecting Plugin Create a new Vendure plugin, name it however you want, I followed the documentation and created a greeter route, which is the name I will be using from now on
3. Setup the new Admin UI extension using npx vendure add and selecting Plugin: UI Set up Admin UI extensions then selecting the previously created plugin
4. Create the React route component under src/plugins/greeter/ui/components/Greeter.tsx with the following code:

import React from 'react';

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

5. Define the route in the src/plugins/greeter/ui/routes.ts with the following code:

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

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

6. Run the dev server using npm run dev, after a short time the error will show in the terminal

Expected behavior
The route created using React should work and not fail to compile.

Environment (please complete the following information):

• @vendure/core version: 2.2.4
• Nodejs version: 20.12.2
• Database (mysql/postgres etc): SQLite

Additional context
I tried googling the error but could not get any of the solution to work. It seems to be a TypeScript configuration error but nothing I tried fixed it.

This seems to be the same problem than this issue but I could not find how it was resolved or why it was closed, if this is a user error on my part I apologize in advance.

[michaelbromley]

Thanks for the report. I was able to reproduce this, and it can be fixed with npm i -D @types/react. I'll update the CLI command to automatically install that.