Next.js 모노레포 ‘You may need an appropriate loader to handle this file type’ 오류 해결

2024-05-16 13:47에 생성2024-08-22 14:41에 수정

Next.js 모노레포 환경에서 TypeScript 패키지를 불러와 사용했는데, 프로덕션 빌드 도중 오류가 발생한다.

Failed to compile.

../../../packages/frontend/utils/src/lib/lib.ts
Module parse failed: Unexpected token (1:12)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> import type { FC } from "react";
| import { createElement, memo } from "react";
|

원인 분석

모노레포에서 로컬 패키지를 불러오면 main 파일을 src/main.ts 과 같이 해놓기 마련인데, 기본적으로 Next.js의 webpack은 패키지까지 트랜스파일링하지 않는 듯 하다.

해결

transpilePackages 옵션을 사용하여 해결할 수 있다.

next.config.js Options: transpilePackages

Automatically transpile and bundle dependencies from local packages (like monorepos) or from external dependencies (`node_modules`).

https://nextjs.org/docs/app/api-reference/next-config-js/transpilePackages

next.config.js Options: transpilePackages

📎

Next.js 13보다 오래된 버전을 사용중이라면 next-transpile-modules 레포지토리를 참고하자.

안내

해당 글은 '도다 Aha!'에서 이전된 글입니다. 이전 글과 달라진 부분이 있을 수 있습니다.

태그

next.js

반응과 댓글 시스템은 Giscus에 의해 호스팅되며, 모든 대화는 GitHub에 저장됩니다.