Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Trying not to use suspense, getting suspense errors

See original GitHub issue

Hi! Due to specific project constraints, I would like to handle the loading state of the translations as far down as I can, with minimum refactoring.

I previously had a <Suspense> component wrapping my application, but getting a proper fallback was difficult, and I had loaders when loading a new namespace, breaking my layout.

I chose to override my withTranslation / useTranslation imports for minimal refactoring, replacing them with essentially the same thing, but with their loader inside the t() call.

Code is available here:

useTranslation.js: https://gist.github.com/Aldrian/33708e49ec2429a0c77129d2855be2ee
withTranslation.js: https://gist.github.com/Aldrian/027b08ae69e757abbd9a47341fbf5d53

I initially tried to wrap my CustomT with a <Suspense> component, but since it was called below useTranslation it wasn’t working. I chose to opt-out of suspense by using useSuspense: false in each useTranslation usage, and set useSuspense to false in the i18n configuration

i18n.js: https://gist.github.com/Aldrian/206519cd8c5c2b58f2eb0ffd639e5c5b

With everything set to false, I removed the root <Suspense> component, checked that no useTranslation and withTranslation were imported straight from react-i18n and still got a suspense error:

Error: A React component suspended while rendering, but no fallback UI was specified. Add a <Suspense fallback=...> component higher in the tree to provide a loading indicator or placeholder to display. in Unknown (at withTracker.js:36) in HOC (created by Context.Consumer) in Route (at Body.js:143) in Switch (at Body.js:142) in main (created by Context.Consumer) in Styled(main) (at Body.js:125) in Query (at Body.js:109) in Body (created by I18nextWithTranslation) in I18nextWithTranslation (created by Context.Consumer) in withRouter(I18nextWithTranslation) (at src/index.js:68) in SentryReporter (created by I18nextWithTranslation) in I18nextWithTranslation (created by Context.Consumer) in withRouter(I18nextWithTranslation) (at src/index.js:67) in Router (at src/index.js:65) in ApolloProvider (at src/index.js:64)

Any pointers?

Thanks!