A React component suspended while rendering, but no fallback UI was specified

Solution 1:

You have 2 options:

1. 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
       }
   });
   

2. Using Suspense, for example:

   <Suspense fallback={<div>Loading... </div>}>
         <App />
   </Suspense>

Solution 2:

In order to fix this without putting Suspense back in, you would need to get rid of usages of React.lazy.

Solution 3:

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.

Solution 4:

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>
} />