[Next.js] Antd es module 사용시 이슈(nextjs antd syntaxerror cannot use import statement outside a module)

01. Antd es module 사용시 이슈

antd의 es라고 붙은 컴포넌트를 사용할때  cannot use import statement outside a module 이런 이슈가 발생했다.

처음에 고치다가 잘 안되서 포기했는데, 다시 잘 찾아보니 해결 방법이 굉장히 간단했다.

 

 

 

02. 해결방법

1) yarn add next-transpile-modules 설치

2) next.config.mjs에 코드 추가

/** @type {import('next').NextConfig} */
import withTM from 'next-transpile-modules';
 
...

// antd는 무조건 들어가야하고, 나머지는 옵션
export default withTM(['antd', 'rc-picker', 'rc-util', '@ant-design/icons', 'rc-pagination', 'rc-notification'])({
    nextConfig
});

 

 

 

03. 발생이유

라이브러리 크기와 불러오기 방식

• antd: 기본적으로 모든 Ant Design 컴포넌트와 스타일을 포함한 완전한 버전입니다. 이 버전을 불러올 때는 모든 Ant Design 컴포넌트와 스타일이 번들에 포함됩니다. 따라서 파일 크기가 크고 초기 로딩 시간이 더 걸릴 수 있습니다. 일반적으로 import { Button } from 'antd';와 같이 사용합니다.
• antd/es: ES 모듈 형식으로 제공되며, 필요한 컴포넌트만 개별적으로 불러와서 사용할 수 있습니다. 이 방식은 트리 쉐이킹(tree shaking)이 가능하므로 번들 크기를 줄일 수 있습니다. 예를 들어 import Button from 'antd/es/button';와 같이 필요한 컴포넌트를 직접 지정하여 사용합니다.

2. 트리 쉐이킹과 번들 최적화

• antd/es의 장점: ES 모듈 형식으로 제공되기 때문에 webpack과 같은 모듈 번들러에서 트리 쉐이킹을 활용할 수 있습니다. 이는 사용하지 않는 컴포넌트와 스타일을 번들에 포함시키지 않고 제거하여 번들 크기를 최소화할 수 있습니다. 따라서 대규모 애플리케이션에서 특히 유용합니다.
• antd의 단점: 전체 라이브러리를 한 번에 불러오기 때문에 트리 쉐이킹이 제한적이며, 번들 크기가 크고 초기 로딩 속도가 느릴 수 있습니다. 작은 규모의 프로젝트에서는 큰 문제가 되지 않을 수 있지만, 큰 규모의 프로젝트에서는 번들 최적화가 중요한 요소가 될 수 있습니다.

3. 사용 시 고려사항

• antd: 모든 컴포넌트와 스타일을 포함하기 때문에, 간편하게 모든 기능을 사용할 수 있으며 초기 설정이 간단합니다. 하지만 번들 크기와 성능에 대한 영향이 있을 수 있습니다.
• antd/es: 필요한 컴포넌트만 선택적으로 불러와서 사용할 수 있습니다. 번들 크기를 최적화하고자 할 때 유용하지만, 초기 설정과 관리가 다소 복잡할 수 있습니다.

 

라고 하여, 번들 크기를 최소화, 경량화해서 사용하기 위해 나온게 es 모듈 컴포넌트인데, 이게 SSR을 사용하는 nextjs에서는 외부의 모듈을 사용하는 거기 때문에 문제가 발생하는 듯하다.

빌드할 때는 나중에 따로 조치를 해줘야할지도?