[RN/오류노트] Solved - Requiring unknown module "./locale/ko-KR"., js engine: hermes

해당 글에서는 React Native 운영(release, TestFlight) 과정 중에 발생하는 공통적인 오류에 대해서 해결방법에 대해 알아봅니다

 

1) 문제점

---

💡 문제점

- 개발단계에서는 발생하지 않았던 부분이 운영(release / TestFlight) 준비 단계에서 크래시 로그로 종료되는 증상이 발생하였습니다. 이 크래시 로그를 확인하기 위해 Android Studio의 Logcat을 이용하였을 때 아래와 같은 오류가 발생되는 것을 확인하였습니다.

- Error: Requiring unknown module "./locale/ko-kr"., js engine: hermes FATAL EXCEPTION: mqt_v_native Process: com.tha.todaycigarette, PID: 28467 com.facebook.react.common.JavascriptException: Error: Requiring unknown module "./locale/ko-KR"., js engine: hermes, stack:

 

 

2) 해결방법

---

 

1. 문제점 확인

---

💡 문제점 확인

- 아래와 같이 moment를 사용하기 위해서 moment, moment-timezone 라이브러리를 import 하였습니다. 그리고, i18n.lanaguage에서 불러와서 moment의 timezone을 지정하였습니다.
- 그러나, 누락된 부분있었고, 잘못된 부분이 있음을 확인하였습니다.

import moment from 'moment';
import 'moment-timezone';

useFocusEffect(
  useCallback(() => {
    moment.tz(timeZone).locale(i18n.language); 
  }, [i18n.language]),
);

 

 

2. 문제점 해결방법

---

💡 문제점 해결방법 -1

- 우선, 아래와 같이 ‘moment/locale/ko’에 대한 import가 포함이 되어 있어야 합니다.

import moment from 'moment';
import 'moment-timezone';

import 'moment/locale/ko'; // 🟢 해당 부분 필수

 

 

💡 문제점 해결방법 -2 

- 그리고 i18n.language 부분에 대해서는 아래와 같이 커스텀으로 구성한 부분입니다.
- i18n.language를 불러왔을 경우 ‘ko’라는 값이 아닌 ‘ko-KR’ 값을 불러오기에 moment.locale() 부분에 문제가 발생합니다.

// 문제점
useFocusEffect(
  useCallback(() => {
    moment.tz(timeZone).locale(i18n.language); // 로케일 지정
  }, [i18n.language]),
);

// 해결방법
useFocusEffect(
	useCallback(() => {
		moment.tz(timeZone).locale(i18n.language.startsWith('ko') ? 'ko' : 'en'); // 🟢 명확한 값으로 로케일 지정
	}, [i18n.language]),
);

 

💡 다국어 적용에 대한 코드 

import 'intl-pluralrules';

import type { Language } from '@/hooks/language/schema';

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

import en from './en-EN.json';
import fr from './fr-FR.json';
import ko from './ko-KR.json';

export const defaultNS = 'main' as const;

export const resources = {
	'en-EN': en,
	'fr-FR': fr,
	'ko-KR': ko,
} as const satisfies Record<Language, unknown>;

i18n
	.use(initReactI18next)
	.init({
		defaultNS,
		fallbackLng: 'ko-KR',
		lng: 'ko-KR',
		resources,
		// ✅ 여기에 추가
		interpolation: {
			escapeValue: false, // HTML escape 방지 (특히 작은따옴표 등)
		},
	})
	.then(() => {
		// add capitalization formatter
		i18n.services.formatter?.add(
			'capitalize',
			(value: string) => value.charAt(0).toUpperCase() + value.slice(1).toLowerCase(),
		);
	});

export default i18n;

 

 

 

오늘도 감사합니다. 😀