Rollup 모듈에서 Cannot read properties of null (reading 'useState') 오류 조치

오류 내용

rollup으로 공통으로 사용할 ui 모듈을 생성하여, web app에 가져다가 사용하는 도중에 아래와 같은 오류가 발생했다.

Uncaught TypeError: Cannot read properties of null (reading 'useState')

오류 내용은 null에서 useState를 읽으려고 하다보니 발생한다. 공통 모듈 개발 당시에는 문제없이 동작을 했는데, rollup 번들링을 하고 나면 오류가 발생한다.

 

공통 모듈 개발 당시 정상 동작 확인

공통 모듈 storybook

 

 

 

오류 조치

rollup 빌드시 external 옵션에 react, react-dom을 추가해줘야 한다. (만약 styled-components를 사용한다면, 같이 포함해줘야 함)

 

rollup.config.js

// ...

export default {
  // ...
  plugins: [
    // ...
  ]
  external: ['react', 'react-dom', 'styled-components'],
};

 

external 옵션에 추가하기 전에는 번들링된 파일의 상단을 보면 react, react-dom, styled-components를 import 하는 부분이 없다.

 

external 옵션을 추가하면 아래와 같이 import 부분이 생기는 것을 확인 할 수 있다. 아무래도 external 옵션에 react, react-dom과 같이 관련있는 외부 모듈이 import가 되지 않아서, 발생한 문제로 보인다.