Description
This might not be directly an issue, but I'm looking for some advice.
I'm trying to use this package ([email protected]) in a Next.js codebase set up with preact/compat as detailed in the using-preact example. I've also got TypeScript configured, with the following tsconfig:
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
},
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext", "ESNext.Intl", "ES2018.Intl"],
"allowJs": false,
"skipLibCheck": false,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"typeRoots": ["node_modules/@types", "./src/types"]
},
"exclude": ["node_modules", ".next", "out"],
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "**/*.js"]
}I haven't followed the advice to add "jsxImportSource": "preact", from the Preact TS docs as that causes hundreds of errors in our codebase. I'm guessing that would be beneficial in a 'pure' Preact codebase, but isn't useful here. (If you can confirm this hunch, that would be great).
Now, the issue here is that, when I try to use <Markup /> in my JSX, I'm getting the following TS error:
'Markup' cannot be used as a JSX component.
Its instance type 'Markup' is not a valid JSX element.
Property 'refs' is missing in type 'Markup' but required in type 'ElementClass'.ts(2786)
ElementClass is defined in @types/react, likely because the TS compiler (erroneously) figures that (the return value of) any component used in JSX should extend JSX.ElementClass. I'm by no means a very experienced TS user, so this is a best guess.
Now, I've tried to monkey patch the type of Markup like this by overwriting the keys the TS compiler complains about in my own code:
import BaseMarkup from 'preact-markup';
import { ReactInstance } from 'react';
const Markup = BaseMarkup as typeof BaseMarkup & {
refs: { [key: string]: ReactInstance };
};
export { Markup };Unfortunately, that doesn't work either as it doesn't seem to be possible to extend classes like this. Now I could probably just go const Markup = BaseMarkup as any; and call it a day, but I would like to find a way to accurately type this for my codebase, if at all possible so we can keep code completion in our editors. Is it possible to get this typed correctly somehow?