Closed maxbrieiev closed 1 month ago
FYI, I get this type error also with Nodejs:
npm init preact
cd my-preact-app
npm install @headlessui/react
Create a file with the content as in the previous message and observe the error.
When you say
When doing
import { type Ref } from "react"
, preact's compatibility layer appears to resolve the type frompreact/hooks/src
, but possibly it should be resolved frompreact/src
instead. This seems to cause type errors.
Do you mean this type error goes away if you switch it to the type from core, rather than hooks?
It's certainly possible that was just a typo when it was written, standardizing the Ref
interface (where possible, I think everything should mostly align w/out issue) sounds good to me if you wanted to make a PR.
Do you mean this type error goes away if you switch it to the type from core, rather than hooks?
Correct.
It turns out that the error can be reproduced as simply as this:
import type { ForwardedRef, Ref } from "preact/compat";
export const fun = (ref: ForwardedRef<HTMLInputElement>): Ref<HTMLInputElement> => ref;
And here is the patch with a testcase that fixes the error:
diff --git a/compat/src/index.d.ts b/compat/src/index.d.ts
index 810629c1..08f2cbb6 100644
--- a/compat/src/index.d.ts
+++ b/compat/src/index.d.ts
@@ -18,7 +18,7 @@ declare namespace React {
export import PropRef = _hooks.PropRef;
export import Reducer = _hooks.Reducer;
export import Dispatch = _hooks.Dispatch;
- export import Ref = _hooks.Ref;
+ export import Ref = preact.Ref;
export import SetStateAction = _hooks.StateUpdater;
export import useCallback = _hooks.useCallback;
export import useContext = _hooks.useContext;
diff --git a/compat/test/ts/forward-ref.tsx b/compat/test/ts/forward-ref.tsx
index 9a920cb0..e83ae540 100644
--- a/compat/test/ts/forward-ref.tsx
+++ b/compat/test/ts/forward-ref.tsx
@@ -24,3 +24,7 @@ export const Bar = React.forwardRef<HTMLDivElement, { children: any }>(
return <div ref={ref}>{props.children}</div>;
}
);
+
+export const baz = (
+ ref: React.ForwardedRef<HTMLInputElement>
+): React.Ref<HTMLInputElement> => ref;
If it feels ok, I can submit a pull request.
Describe the bug
I am having some issue with preact's compatibility layer. I use Deno and Headlessui, but I don't think it is Deno specific.
There are unexpected type errors, when using
forwardRef
,ForwardedRef
andRef
. When doingimport { type Ref } from "react"
, the preact's compatibility layer appears to resolve the type frompreact/hooks/src
, but possibly it should be resolved frompreact/src
instead. This seems to cause type errors.To Reproduce
Add the following to
deno.json
:Create
index.tsx
file with the following content:Run
deno check index.tsx
and observe the output:Screenshot