Type errors when using Preact with Typescript

[petargyurov]

Environment

• Package version(s):

  "dependencies": {
    "@blueprintjs/core": "^4.8.0",
    "preact": "^10.3.2",
    "preact-render-to-string": "^5.1.4",
    "preact-router": "^3.2.1",
    "react": "npm:@preact/compat",
    "react-dom": "npm:@preact/compat",
    "@types/react": "18.0.17",
    "@types/react-dom": "18.0.6",
  }

• Operating System: macOS Monterey 12.5
• Browser name and version: Firefox 103

Code Sandbox

N/A

Steps to reproduce

1. Create a new Preact project using the Typescript template: npx preact-cli create typescript myproj
2. Alias React dependencies, see here
3. Install latest Blueprint: npm install @blueprintjs/core
4. Add the required CSS files to style/index.css:

// using node-style package resolution in a CSS file: 
@import "~normalize.css";
@import "~@blueprintjs/core/lib/css/blueprint.css";
@import "~@blueprintjs/icons/lib/css/blueprint-icons.css";

5. Add the Spinner element inside, for example, the existing Header component:

import { h } from 'preact';
import { Link } from 'preact-router/match';
import style from './style.css';
import { Spinner } from "@blueprintjs/core";

const Header = () => (
	<header class={style.header}>
		<h1>Preact App</h1>
		<Spinner intent="primary" />
		<nav>
			<Link activeClassName={style.active} href="/">Home</Link>
			<Link activeClassName={style.active} href="/profile">Me</Link>
			<Link activeClassName={style.active} href="/profile/john">John</Link>
		</nav>
	</header>
);

export default Header;

6. Observe errors in IDE and/or run npm run dev and observe errors in console

Actual behavior

'Spinner' cannot be used as a JSX component. Its instance type 'Spinner' is not a valid JSX element.

Expected behavior

No errors.

Possible solution

This has been mentioned in numerous issues, primarily #5250 . I see that a fix has been merged but is a release available? Is this a Preact only issue?

[pringshia]

I'm having this issue as well with React (with a new project scaffolded using Vite) and adding in the <Spinner /> component. Hoping for a fix, as the Getting Started tutorial doesn't work as is.

I fixed this for now by downgrading to "@types/react": "18.0.0", "@types/react-dom": "18.0.0" as @adidahiya used by the codesandbox here: https://codesandbox.io/s/blueprint-with-react-18-2wfvt5?file=/package.json