A React component suspended while rendering, but no fallback UI was specified
I know it's not exactly @IshanPatel's problem but what can cause this error message is if you use a hook like useTranslation() directly inside of the function holding <Suspense />
. The solution is to move that code simply into a separate function and have the hook there (see screenshot).
This came up first on Google and I guess someone could waste a long time on finding a fix so I wanted to share it as comment.
You have 2 options:
Without Using suspense, you can configure that i18n.js like this:
i18n .use(XHR) .use(LanguageDetector) .init({ react: { useSuspense: false // <---- this will do the magic } });
Using Suspense, for example:
<Suspense fallback={<div>Loading... </div>}> <App /> </Suspense>
Removing React.lazy
is not a good idea. Since if your application grows it will take too much time to load the home page.
For react-router v6+ we have the following:
<Route path="about" element={
<React.Suspense fallback={<>...</>}>
<About />
</React.Suspense>
} />
In order to fix this without putting Suspense
back in, you would need to get rid of usages of React.lazy
.