스토리북 정적 배포 시, Cannot read properties of null (reading 'useRef') 오류 발생

History

• 아래의 상황에서 ui package의 정적 배포가 필요하다.
• npm workspace
• 소스 코드 직접 참조

Issue

• 몇몇 컴포넌트에서 해당 오류가 발생한다. (useRef 뿐만 아니라 useState도 발생)
• 원인
• npm workspace로 모노레포를 구성하였기 때문에 공통 의존성으로 사용하는 리액트의 여러 복사본이 존재하게 된다.
• 해당 오류는 리액트 훅을 사용하는 컴포넌트가 올바른 리액트 인스턴스를 참조하지 못했을 때 발생한다.
• 스토리북은 독립적인 빌드 시스템을 가지고 있으며 모노레포 내의 각 패키지에서 리액트를 가져올 때 각각의 node_modules에서 리액트를 번들링할 수 있다. ⇒ 리액트 인스턴스가 여러 개가 생성되어 올바른 리액트 인스턴스를 참조하지 못하였고 훅 관련 오류를 유발
• 해결 방안
• 리액트 모듈을 해석할 때, 특정 경로의 리액트로 해석하도록 하여 모든 워크스페이스가 동일한 리액트 인스턴스를 사용하도록 강제 ⇒ 여러 리액트 인스턴스로 인한 충돌 방지, 훅이 올바르게 작동하도록 함
• main.ts 파일

viteFinal: (config) => {
    if (config.plugins) {
      config.plugins = config.plugins.filter(
        (plugin) => plugin && 'name' in plugin && plugin.name !== 'react-refresh'
      );
    }

    if (config.resolve) {
      config.resolve.alias = {
        ...config.resolve.alias,
        'react': resolve(__dirname, '../../../node_modules/react'),
        '@ui': resolve(__dirname, '../../ui/src')
      }
    }

    return {
      ...config,
      define: {
        'process.env.NODE_ENV': config.mode
      }
    }
  },

Reference