'Router' cannot be used as a JSX component.

[Leonardo Merza]

when trying to build i get

src/app.tsx:29:10 - error TS2786: 'Router' cannot be used as a JSX component.
  Its instance type 'Router' is not a valid JSX element.
    Property 'refs' is missing in type 'Router' but required in type 'ElementClass'.

29         <Router>

[Christoph Werner]

Same here, using preact-router@4.1.0 and preact@10.10.0

It’s a problem with the typescript types, the functionality is fine.

[Vladislav Bezenson]

Just add this to your tsconfig.json

// TypeScript >= 4.1.1
{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "preact",
    //...
  }
}

Described here: https://preactjs.com/guide/v10/typescript/#typescript-configuration

[Ryan Christian]

Can't reproduce, might've been a TS issue?

Going to close out, feel free to reply with more info if it's still an issue.

[EquinoxFlowerJG]

Have you solved this problem?

[Vladislav Bezenson]

Have you solved this problem?

My solution didn't help? #426 (comment)

[EquinoxFlowerJG]

Have you solved this problem?

My solution didn't help? #426 (comment)

I have added that in my tsconfig.json before. But it still can not work.
Then, I found that the default exported Router is indeed not a JSX component. I changed the import Router from 'preact-router'; to import { Router } from 'preact-router'; because the useage example in README.md do that sometimes.
In fact, both of these ways are used in the README.md, which makes me very confused. There are still many areas in the README.md that confuse me, not just this one.