-
Notifications
You must be signed in to change notification settings - Fork 13.2k
Description
I'm using the new jsxFragmentFactory to make Fragment work in a Preact setup, but TypeScript won't recognize it.
TypeScript Versions: 4.0.0-beta, 4.0.0-dev.20200706
Search Terms: JSX Fragment Factory, Preact
Code
Counter.tsx
import { Fragment, h } from "preact"
import { useState } from "preact/hooks"
type CounterProps = {
count?: number
}
export function Counter({count = 0}: CounterProps) {
const [cnt, setCnt] = useState(count)
return <>
<p>{cnt}</p>
<button onClick={() => setCnt((prev) => prev + 1)} type="button">Update</button>
</>
}tsconfig.json
{
"compilerOptions": {
"target": "esnext",
"lib": ["DOM", "DOM.Iterable", "esnext"],
"allowJs": false,
"skipLibCheck": false,
"esModuleInterop": false,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "Node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "preserve",
"jsxFactory": "h",
"jsxFragmentFactory": "Fragment",
"noUnusedLocals": true
},
"include": ["src"]
}See also:
Expected behavior: TypeScript recognizes that I use <>...</> as a shorthand for the imported Fragment
Actual behavior:
With "noUnusedLocals" set to true, TypeScript throws error TS6133: 'Fragment' is declared but its value is never read.
Playground Link: No playground, but a GitHub repo (https://github.com/ddprrt/preact-vite-ts-playground) -- this is a Vite setup that compiles, but I think this can be ignored for this issue. Editor feedback and running tsc show the actual behavior.
Hope this helps!
