[i18next] i18next::translator: key "xxx" for namespace "translation" won't get resolved as namespace was not yet loaded 에러 해결

Error : i18next::translator: key "xxx" for namespace "translation" won't get resolved as namespace was not yet loaded This means something IS WRONG in your application setup. You access the t function before i18next.init / i18next.loadNamespace / i18next.changeLanguage was done. Wait for the callback or Promise to resolve before accessing it!!!

에러 메시지를 통해 namespace가 로드되기 전에 “translation”이라는 네임스페이스에서 “xxx”라는 키를 접근하려고 했기 때문에 발생한 오류인 것을 확인했다.

해당 에러를 해결하려면 namespace가 로드 된 이후에 접근하면 되는데,

해결

react-i18next에서의 문제와 마찬가지로 ready상태일 때만 namespace를 접근하도록 하면 된다.

이를 위해 next-i18next.config.js 에서 밑의 설정을 추가해주면 된다.

react : {
	useSuspense: false
}

react-i18nnext Suspense 참고

react-i18nnext의 경우 기본적으로 suspense를 사용하는데,

이를 사용하지 않으려면 위와 같이 config 파일에서 지정해주어야한다.

단, suspense를 사용하지 않기로 설정하면 그에 따른 영향이 있는데,

‘not ready’ 상태를 처리하는 로직이 따로 필요하다.

⇒ loading 컴포넌트를 ‘not ready’ 상태일 때 렌더링하고,
⇒ 보여줘야 하는 컴포넌트는 ‘ready’ 상태일 때만 렌더링 해야한다.

만약 이렇게 하지 않는다면, transition 관련이 로드되기 전에 먼저 번역이 렌더링 되는 현상이 나타날 수 있다.

Reference
- https://stackoverflow.com/questions/58871043/react-i18next-suspense
- https://github.com/i18next/react-i18next/issues/977