'Router' cannot be used as a JSX component.

[ljmerza]

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>

[codepunkt]

Same here, using [email protected] and [email protected]

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

[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

[rschristian]

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?

[bezenson]

Have you solved this problem?

My solution didn't help? https://github.com/preactjs/preact-router/issues/426#issuecomment-1398645009

[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.

[Luk139]

{/* @ts-expect-error Server Component /} {/ @ts-expect-error */}

Weirdly enough, copying either of those in the line before the component that throws the error, seems to fix the Problem for now. Remove the {} if you are inside a return, so just /* @ts-expect-error */