Rollup Config 'external'

 

https://rollupjs.org/configuration-options/#external

Configuration Options | Rollup

문제상황

사내에서 npm 모듈을 제작하는 과정에서 rollup build 명령 실행 시 peer-dependency인 react가 빌드에 포함되지 않아 발생했던 문제가 있었다.

 

원인분석

- react가 peer-dependency이기에 실제로는 빌드에 포함되지 않아야 했다 (react를 사용하는 프로젝트에만 설치되는 것을 가정하기에, 원 프로젝트의 리액트를 사용하는 것을 가정했다.)

- 모노레포 구조에서 루트에는 react가 설치되어 있어, 개발 과정에서 react를 import 할 때는 문제가 없었다.

- rollup -c를 실행하면 패키지 레벨에는 react가 포함되어 있지 않아 문제가 발생

[!] RollupError: src/Provider.tsx (4:9): "createContext" is not exported by "../../node_modules/.pnpm/react@18.3.1/node_modules/react/index.js", imported by "src/Provider.tsx".

 

해결 방법

- rollup 옵션 중 external을 활용하여, react, react/jsx-runtime을 build에서 제외했다.

- 패키지가 설치되는 프로젝트의 react를 사용하도록, 의도대로 빌드되도록 설정했다.

 

// rollup.config.js

export default defineConfig({
  // input, output, plugins, ...
  external: ['react', 'react/jsx-runtime']
});

 

결과 및 결론

- 패키지 크기 감소

- peer-dependency 목적에 맞게, 빌드에 포함시키지 않고 목적에 맞게 패키지 구성이 가능해짐

 

모노레포 환경에서 React에 의존하지만, 빌드에는 포함시키지 않고자 할 때 rollup의 external 옵션을 사용하여 peer-dependency를 의도에 맞게 활용할 수 있었다.