[Next] Next14 모노레포에서 로컬 페키지, 모듈 가져와서 사용하는 방법

Next14 모노레포에서 로컬 페키지, 모듈 가져와서 사용하는 방법

프로젝트를 Next 12에서 14로 업그레이드를 하였습니다.
그러나 아래와 같은 에러 메시지가 발생하며 실행되지 않았습니다.
찾아보니 Next14에서 설정이 조금 변경이 되었습니다.
한번 알아보도록 하겠습니다.

발생한 에러와 해결 방법

next-transpile-modules - could not find default CSS rule, CSS imports may not work
next-transpile-modules - could not find default SASS rule, SASS imports may not work
next-transpile-modules - could not find default CSS rule, CSS imports may not work
next-transpile-modules - could not find default SASS rule, SASS imports may not work
next-transpile-modules - could not find default CSS rule, CSS imports may not work
next-transpile-modules - could not find default SASS rule, SASS imports may not work

하나씩 설정을 건드려보니 next.config.js에서 제대로 동작하지 않는 것을 확인했습니다.
저희는 모노레포를 사용하고 있고 특정 프로젝트에서는 다른 프로젝트를 모듈로 가져와서 사용하고 있습니다.

12 버전에서는 withTM으로 다른 모듈을 가져와서 사용했었는데,
14 버전에서는 transpilePackages로 변경이 된 것이었습니다.

프로젝트 경로를 예를들어 아래와 같다고 가정하겠습니다.

@project/utils
@project/date

Next12

const withTM = require("next-transpile-modules")([
  "@project/utils",
  "@project/date"
]);

const nextConfig = {
  reactStrictMode: true,
};

module.exports = withTM(nextConfig);

Next14

const nextConfig = {
  reactStrictMode: true,
  transpilePackages: ["@project/utils", "@project/date"],
};

module.exports = nextConfig;

위처럼 변경해주니 정상 동작하였습니다.
Next12에서 Next14로 업그레이드 시 참고하시길 바랍니다.
확인해보지는 않았지만 마이그레이션 문서에 있을 것 같습니다.

참고문헌

• transpilePackages