[hotfix] 빌드된 모듈 배포 관련 문제

[cadenzah]

Branch Name

hotfix/7-rollup-config

Type of Change

environment

Priority

high

Summary

모듈을 빌드하여 내보낼 때, 내부에서 사용되는 video.js 라이브러리에 대한 의존성이 포함되지 않아, 컴포넌트를 사용할 수 없는 문제 수정

Description of Change

Rollup build 수행시 아래의 경고가 출력되면서, video.js 라이브러리가 모듈 상에 의존성이 주입되지않고 있음을 탐지.

(!) Unresolved dependencies https://rollupjs.org/guide/en#warning-treating-module-as-external-dependency

Rollup을 통한 빌드시, video.js 모듈의 내용이 번들에 포함되지 않아 해당 모듈을 사용할 수 없는 문제가 발생. Rollup 설정을 변경하여 Babel을 통하여 해당 모듈을 트랜스파일 및 번들에 포함시키도록 빌드 설정을 수정한다.

작업에 앞서, deprecated된 Rollup 관련 모듈들을 대체하였다:

• @rollup/plugin-commonjs
• @rollup/plugin-node-resolve
• @rollup/plugin-babel

@rollup/plugin-babel의 경우 기존의 config가 호환되지 않아 교체 필요가 있어 관련 문법을 참고하여 값을 수정하였다. 이때, Babel을 통한 호환성 해결을 개발할 때뿐 아니라 최종적으로 모듈을 배포하였을 때에도 호환성 적용이 이루어지도록, 런타임 상황에서 Babel을 사용할 수 있도록 설정을 적용해야 했다. 관련 작업은 다음의 모듈 설치로 해결하였다:

• @babel/plugin-transform-runtime: devDependency
• @babel/runtime: dependency

Expected Next or Associated Work (If exists)

X

Estimated Story Point

3

Reference (If exists)

• @rollup/plugin-babel

[cadenzah]

모듈에 포함된 React 패키지로 인하여, 모듈을 사용하는 프로젝트 상에서 React 패키지가 중복 존재하는 문제가 발생. 모듈에서 사용하는 react 패키지를 peerDependencies로 변경하여 해결.

Reference

• Invalid Hook call warning

위에서 제시하는 경우 가운데 이번 이슈는 3번 문제에 해당한다.

[cadenzah]

해결인 줄 알았으나 해결되지 않아 수 시간 삽질한 경과를 여기에 기록.

1. 배포하려는 모듈에서 peerDependencies를 사용하면, 해당 의존성은 모듈에 설치되지 않는다. 즉, node_modules/ 내에 아예 관련 파일이 존재하지 않는다.
   • 이러한 구성이 되어야 실제 npm을 통하여 모듈을 추가했을 때와 동일한 상황이 될 수 있다. 모듈 수준에서 의존성을 해결할 수 없어야, 그 다음으로 모듈을 사용하는 프로젝트 수준에서 해당 의존성을 해결하려고 NPM이 시도하고, 이에 따라 프로젝트와 모듈이 동일한 React 인스턴스를 참조하게 되기 때문.
   • 따라서 peerDependencies로 설정했음에도 불구하고 React Hooks가 실행되지 않는 문제가 지속된다면, node_modules 디렉토리 내에서 react 모듈을 제거하면 된다.
2. NPM에 publish한 모듈을 unpublish할 경우, 사유와 관계없이 24시간동안 동일 프로젝트는 다시 배포할 수 없다.
   • 테스트로 배포하려고 한다면, 주의 또는 각오하자
   • 또한, <모듈_이름>@x.y.z은 고유하기 때문에, unpublish한 모듈을 다시 배포하는 것은 불가능하다. 대신 이름을 변경하거나, 버전 업을 해서 수행해야 한다. 제발... 이름 바꾸기 너무 싫은데
3. 로컬에서 모듈을 테스트하고자 할 경우, 테스트용 프로젝트 상에서 npm/yarn link를 사용하면 모듈을 심볼릭 링크로 참조할 수 있다.
   • link로 추가된 모듈들에 대한 링크들은 ~/config/yarn/link에 저장된다.
   • 모듈의 프로젝트에서 yarn link를 실행하고,
   • 테스트용 프로젝트에서 yarn link videojs-react-enhanced를 실행하면, 모듈을 수정하고 다시 빌드하더라도 별도의 업데이트 작업(yarn remove, yarn add의 과정) 없이 실시간으로 최신 빌드 결과를 사용할 수 있다. (이게 정말 개꿀)

Reference

• Invalid hook call. Hooks can only be called inside of the body of a function component...
• React hooks in react library giving Invalid hook call error
• Unpublishing packages from the registry
• yarn link
• Add command to show linked packages