의존성 production install 후 next build 시 next.config.mjs 에@next/bundle-analyzer 라이브러리 못찾는 에러 해결

production install 은 devDependencies에 나열 된 패키지를 설치하지 않는 것으로, 

# npm
npm install --production

# yarn
yarn install --production

 

하지만 위와 같이 하게된다면 next.config.mjs 에서 next build 시 에러가 발생한다. 이유는 @next/bundle-analyzer 를 찾을 수 없기 떄문이다. @next/bundle-analyzer 는 devDependencies 에 있기 때문에 production install 시에 설치되지 않는다.

물론 해당 의존성을 dependencies 로 옮기면 바로 해결 될 문제이겠지만, 이런 하드한 방법을 사용하고 싶지 않았다.

 

일단 에러가 나는 이유는 next.config.js 상단에 해당 라이브러리를 import 하기 때문에 발생했다. (mjs 이기때문에 esm 방식으로 사용)

import withBundleAnalyzer from '@next/bundle-analyzer';

 

이 import 구문을 특정 환경 변수 값에 따라 import 해야한다. 상단 import 구문을 지우고,

if (process.env.ANALYZE === 'true') {
  const withBundleAnalyzer = await import('@next/bundle-analyzer');
  config = withBundleAnalyzer.default({
    enabled: true,
  })(config);
}

export default config;

위와 같이 Dynamic import of modules 방식으로 가져오면 된다.

 

그러면, 로컬에서 번들파일을 분석할 때는 ANALYZE 라는 환경변수를 true 로 next build 한다면 분석화면이 나올 것이고, ANALYZE 환경변수를 쓰지않거나 false로 입력한다면 그냥 build 될 것이다.