Deferred leads to type error when used as a React component

[shosti]

Version:

• @inertiajs/react version: 2.0.2
• typescript: 5.4.5

Describe the problem:

When wrapping a component with Deferred like so:

export default function PageWrapper() {
  return (
    <Deferred data="props" fallback={<div>Loading ...</div>}>
      <Page />
    </Deferred>
  );
}

function Page() {
  return <div>Page</div>;
}

I get the following type error:

error TS2786: 'Deferred' cannot be used as a JSX component.
  Its return type 'string | number | ReactElement<unknown, string | JSXElementConstructor<any>>' is not a valid JSX element.
    Type 'string' is not assignable to type 'ReactElement<any, any>'.

Looking at the generated types, this error seems correct:

declare const Deferred: {
    ({ children, data, fallback }: DeferredProps): string | number | ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
    displayName: string;
};

We're using inertia-rails (the behavior seems correct, the types just look wrong).

[Verox001]

Could you please show how you imported Deferred? Also try updating to Version 2.0.3. Maybe that issue was already fixed @shosti