React 18 and Suspense problem (worked in older versions)

Question

In my React app with react router I used to define routes like this:

   <Route exact path={Paths.landing} component={Awaiting(starWars)} />

with Await helper defined like this:

import React, { Suspense } from "react";

function Awaiting<T>(Component: React.ComponentType<T>) {
    return (props: T) => (
        <Suspense fallback={null}>
            <Component {...props} />
        </Suspense>
    );
}
export default Awaiting;

And while this worked perfectly in 17.xx version it does not in 18, namely Awaiting throws errors:

'Suspense' refers to a value, but is being used as a type here. Did you mean 'typeof Suspense'?

Cannot find name 'fallback'
Operator '>' cannot be applied to types '{ null: any; }' and 'number'

and few others generally indicating that syntax is wrong.

After reading article https://blog.saeloun.com/2021/07/29/react-18-alpha-behavior-changes-in-suspense

I tried:

import React, { Suspense } from "react";

function Awaiting<T>(Component: React.ComponentType<T>) {
    return (props: T) => (
        <Suspense fallback={<><h1>"Loading"</h1> </>}>
            <Component {...props} />
        </Suspense>
    );
}
export default Awaiting;

But it is still not OK. What is wrong here, what should be the code like?

is your file `.tsx` or `.jsx` – Sachila Ranawaka Nov 06 '22 at 10:40 — Sachila Ranawaka, Nov 06 '22 at 10:40
yes, you are right - it should be tsx – Kiszuriwalilibori Nov 06 '22 at 10:59 — Kiszuriwalilibori, Nov 06 '22 at 10:59

score 0 · Answer 1 · answered Nov 06 '22 at 11:01

OK, after changing file type .ts => .tsx

and slight type modifications it works like this:


import React, { Suspense } from "react";

function Awaiting<T>(Component: React.ComponentType<T>) {
    return (props: React.PropsWithChildren<T>) => (
        <Suspense fallback={null}>
            <Component {...props} />
        </Suspense>
    );
}
export default Awaiting;

React 18 and Suspense problem (worked in older versions)

1 Answers1