[i18next] Error: You are passing a wrong module! Please check the object you are passing to i18next.use()

배경

next-i18next 사용 중

next-i18next에서 i18next-http-backend 라이브러리를 이용해
번역 데이터를 backend 와의 API 통신을 통해 가져오는 코드를 작성하려고 하였다.

i18next-http-backend 이란?

i18next-http-backend는 i18next 라이브러리와 함께 사용되는 backend module,
이 module을 사용함으로 써 서버에서 번역 데이터를 동적으로 로드하여 웹에서 사용할 수 있다.

장점

웹에서는 HTTP 요청을 통해 서버에서 번역 데이터를 가져오고, 서버는 요청에 따라 해당 언어의 번역 데이터를 응답으로 전송하는 방식인데,
이 방식을 통해 웹에서는 서버의 번역 데이터를 실시간으로 업데이트할 수 있으므로, 다국어 지원을 효율적으로 할 수 있다.

발생한 에러

You are passing a wrong module! Please check the object you are passing to i18next.use()

해결 방법

정확한 이유는 알 수 없지만, Next.js에서 특정 esm 모듈을 이상한 방식으로 가져오는 부분이 문제가 되었던 것 같다.

그래서 /cjs 를 통해 commonjs로 강제로 로드하게 만들어 해결하였다.

이전

const I18NextHttpBackend = require('i18next-http-backend');

해결 후

const I18NextHttpBackend = require('i18next-http-backend/cjs');

레퍼런스

• https://github.com/i18next/next-i18next/issues/1319