withTranslation with {wait:true}

I am using withTranslation, i18next-xhr-backend, & inside the config.

   react: {
      useSuspense: false,
      wait: true,
    },

In my component file. withTranslation(['wages.wageTypes'])(MyComponent)

Now, whenever my component is being rendered I am getting the message. i18next::translator: missingKey en ns key name key name. Either way, my component is rendering with filled translations. It’s just the log which I don’t like.

Since I am loading the namespaces asynchronously that’s why the message is showing as long as the namespace is not loaded.

What I want is that the component should wait until the translation files are loaded or not show me those messages.

Can I achieve this without using Suspense?

[imdadul]

not for fun

Oh! I thought it was for fun 😃 @jamuhl

I understand the point.

[jamuhl]

forcing components to handle that in order to avoid that log

it’s there for a reason - not for fun - your application does an invalid render because it has the translations not ready…depending on your net speed this might be just a noticeable flicker - still it’s wrong.

So either use suspense, handle the ready state, use v9 with wait: true do not load translations async.