인프런 커뮤니티 질문&답변

황영롱님의 프로필 이미지

작성한 질문수

[리뉴얼] React로 NodeBird SNS 만들기

_app.js와 Head

next 13,14버전으로 하고 있는데 antd에서 다음과같은 오류가 발생합니다.

작성

·

980

1

SyntaxError: Cannot use import statement outside a module

이란 에러가 발생하는데 왜그런걸까요 stackoverflow찾다보니 nextjs 바벨설정이 src 하위를 보게되있어서 es6문법을 변환못해준다고 next.config.js 파일에 아래 transpilePackages 설정을 저렇게 넣어주면 해당 오류가 사라지긴하는대 매번 이렇게 해야되는건지... 근본적인 해결하려면 어떻게 해야할까요

const nextConfig = { reactStrictMode: true, transpilePackages: [ 'antd', '@ant-design', 'rc-util', 'kitchen-flow-editor', '@ant-design/pro-editor', 'zustand', 'leva', 'rc-pagination', 'rc-picker', 'rc-notification', 'rc-tooltip' ], }

답변 1

0

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

antd import한 코드를 어떻게 쓰셨나요? antd에는 esm과 commonjs 둘 다 있어서 상황에 따라 알맞은 모듈을 import하면 되긴 합니다.

황영롱님의 프로필 이미지
황영롱
질문자

import {Menu, Row, Col } from 'antd' 이렇게 했습니다.

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

https://github.com/vercel/next.js/pull/58992

이게 해결되기 전까지는 transpilePackages 쓰셔야 할 것 같네요.

황영롱님의 프로필 이미지
황영롱
질문자

제가 검색하다 해결한거라 저렇게 설정하면 왜 되는건지에 대해 잘 모르겠는대 transpilePackages 이부분이 멀해주는건가요?

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

esm 모듈 코드나 로컬 모노레포 코드들도 같이 transpile되게 해주는 역할인 것 같습니다.