60

I just started working on this new React app.

It was using <Suspense /> element in the component but I removed it. Then application is crashed with above error.

Is there any easy fix without know too much about <Suspense /> ?

enter image description here

Ishan Patel
  • 5,571
  • 12
  • 47
  • 68
  • Could you post your code? However from just the error it's likely you haven't supplied anything to the `fallback` parameter. I'd suggest [reading up on the ``](https://reactjs.org/docs/code-splitting.html#suspense) component again and then modifying your code. – Keno Jan 30 '19 at 03:31
  • You might still be lazy importing the component. Remove it and do a normal import – Stiaan Wolfaardt Mar 27 '20 at 07:51

6 Answers6

87

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>
Jose A
  • 10,053
  • 11
  • 75
  • 108
Guy Engel
  • 2,436
  • 1
  • 17
  • 13
  • I would prefer the first option. I had very bad sideeffects using the second option, since the suspense is defined not only for the i18n-translations. – user1961312 Jan 31 '23 at 12:17
32

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

Ryan Cogswell
  • 75,046
  • 9
  • 218
  • 198
  • pefectly solved my problem, but i wanna know why we cant use lazyload in suspense? – Sallwa Dec 14 '20 at 08:50
  • Perfect ! Could you please explain why we can't use lazy load in suspense? – SatelBill Sep 27 '21 at 00:02
  • 1
    @SatelBill You **can** use lazy load in Suspense. The question was trying to use lazy load **without** suspense which results in an error. – Ryan Cogswell Sep 27 '21 at 00:57
  • Why this guy takes lots of upvotes eventhought not answer any question – sayinmehmet47 Sep 29 '22 at 15:55
  • @sayinmehmet47 What was your question? Because this guy has clarified if you do not wish to use `` in your react code, additionally to removing the `` components, you also need to **replace** lazy load import statements(for example `const component = React.lazy(() => import("./Component"));`) **with** `import Component from "./Component";` – hane Smitter Oct 25 '22 at 10:49
12

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.

Screenshot

Andrew Cheong
  • 29,362
  • 15
  • 90
  • 145
CodingYourLife
  • 7,172
  • 5
  • 55
  • 69
7

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>
} />
Vahid Najafi
  • 4,654
  • 11
  • 43
  • 88
  • Whew, alright. This seems to make the error gone when using react-router v6! ;-) At first I was being "lazy" by just wrapping the whole `` with `` as shown in the docs (https://reactjs.org/docs/code-splitting.html#route-based-code-splitting), i.e. `Loading...}>...` but doing it this way ain't make it work. – Glenn Mohammad Nov 18 '22 at 00:34
1

One error we are easy to make:

// Error: In the fallback component, don't use i18n!
// <Suspense fallback={<div>{t('loading')}... </div>}>

// This is correct
<Suspense fallback={<div>Loading... </div>}>
  <App />
</Suspense>
silencej
  • 221
  • 2
  • 13
0

Also, dont forget about fallback prop in Suspense component - it wont work without it.

user3765649
  • 304
  • 4
  • 11