Next.js Antd 🐜 DatePicker 한글화하기 (Locale)

Localization Example

import 'moment/locale/zh-cn';
import locale from 'antd/es/date-picker/locale/zh_CN';

<DatePicker locale={locale} />;

https://ant.design/components/date-picker/#Localization

예제를 그대로 따라했는데, 아래 문제가 발생했다. 😭
별거 아니지만, 똑같은 문제가 발생한 개발자에게 삽질의 시간을 줄려보고자 작성한다..

Error

Server Error
SyntaxError: Unexpected token 'export'

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
<unknown>
file:///node_modules/rc-picker/es/locale/en_US.js (1)
file:///node_modules/rc-pagination/es/locale/en_US.js (1)
file:///node_modules/rc-notification/es/locale/en_US.js (1)

🔎 검색 결과

문제

• 브라우저가 ES6 모듈 구문을 인식할 수 없기 때문에 코드가 브라우저에서 실행될 때 오류가 발생한다.
• Next.js 는 Default 로 src 폴더에 있는 ES6 코드만 트랜스 파일 하도록 babel-loader 가 구성되어있다.
• node_modules 에서 가져온 모든 ES6 코드는 변환 없이 최종 번들로 직접 이동해서 발생한 문제다.

해결 방안

• next.config.js 파일 안에서 webpack 설정을 수정하자.
• next-transpile-modules를 통해서 트랜스 파일 해보자.
• 에러 내용에 포함 된 모듈을 트랜스 파일 하도록 추가하자.

// next.config.js
const withTM = require('next-transpile-modules')([
  'antd',
  'rc-picker',
  'rc-pagination',
  'rc-notification',
])

https://stackoverflow.com/a/65939797/17484964

추가로 발생한 Error

Server Error
SyntaxError: Cannot use import statement outside a module

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
<unknown>
/node_modules/rc-util/es/omit.js (1)
/node_modules/ (ant-design/icons/es/components/Context.js (1)

해당 에러도 동일하게 처리하면 된다고 한다.
한글화하는데, 연관된 패키지를 다 트랜스 파일 해줘야 하는 것 같다.
하나하나 넣어주다 보니 아래가 최종 코드이다.

// next.config.js
const withTM = require('next-transpile-modules')([
  'antd',
  'rc-picker',
  'rc-util',
  '@ant-design/icons',
  'rc-pagination',
  'rc-notification',
])

---

🔨 이제 드디어 에러가 발생하지 않고 한글화 되었는데, moment는 번들 사이즈를 많이 잡아먹는다. dayjs 로 바꿔보자.

Replace Moment

// components/common/DatePicker.tsx
import { Dayjs } from 'dayjs';
import dayjsGenerateConfig from 'rc-picker/lib/generate/dayjs';
import generatePicker from 'antd/es/date-picker/generatePicker';

const DatePicker = generatePicker<Dayjs>(dayjsGenerateConfig);

export default DatePicker;

이렇게 사용하면 dayjs를 사용한다.

import 'dayjs/locale/ko'

import를 추가해서 한글화를 마무리한다.

https://ant.design/docs/react/replace-moment#DatePicker.tsx

대략 정리된 코드는 아래와 같다.
컴포넌트로 만들어서 사용하면 될 것 같다.

import 'dayjs/locale/ko'

import { Dayjs } from 'dayjs'
import dayjsGenerateConfig from 'rc-picker/lib/generate/dayjs'
import generatePicker from 'antd/es/date-picker/generatePicker'
import locale from 'antd/es/date-picker/locale/ko_KR'

const DatePicker = generatePicker<Dayjs>(dayjsGenerateConfig)

interface AntDatePickerProps {
  // ...
}

export const AntDatePicker = ({ }: AntDatePickerProps) => {
  return <DatePicker locale={locale} />
}

결과