2022/12/08 - package.json module

오늘 라이브러리 수정을 하던 중에, TypeError 에러를 만났다. 이 문제에 대해 해결하기 위하여 styled Component와 rollup과 같은 것에 대해서 검색을 쭉 해보았다.

Next.js

우선 에러가 났었던 환경은 next.js였다. 검색을 하다보면 next js를 사용할 때 외부 라이브러리를 사용하는 경우, type(cjs or mjs)에 따라서 문제가 있다는 것을 알게 되었다. 리액트가 아니라 next js 에서 문제가 생겼기 때문에, cjs 설정을 잘해주면 해결 될 것이라고 판단이 들었다.

Rollup

이미 롤업에서는 cjs를 이미 ouput으로 만들어 두었지만 문제가 생겼다. 그렇다면 cjs로 연결된 entry가 잘못된 것이 아닐까? 라는 생각이 들었다

연결 방법

대부분 이러한 연결은 package.json에서 해결 할 수 있다. 우선, 기본 설정도 react에서만 돌아가기 쉽게 만들었기 때문에 main과 module을 무분별하게 mjs쪽으로 연결해 둔 것을 볼 수 있었다. 우선, package.json에 있는 main과 module을 상황에 맞게 붙도록 수정하였다.

{
	...
	"main": "index.cjs.js",
	"types": "index.d.ts",
	"module": "index.esm.js",
	...
}

이렇게 해도 해결이 안되고 나서 생각이 든것은, package.json에 있는 type이 강제로 module로 고정이 되었기 떄문인가? 라고 생각이 들어서, package.json에서 배포할 때 type을 삭제하게 하였더니 해결되었다.