storybook process is not defined 오류

History

• 소스 코드에서 아래처럼 사용하는 형태가 있다

export const isExternalApp = () => process.env.NODE_DOMAIN === 'external'

• storybook에서 해당 컴포넌트를 렌더링한다

• storybook을 실행시킨다 ⇒ 에러 발생

Issue

• node.js의 환경 변수인 process 객체를 webpack에서는 Polyfill을 해주지만 vite는 해주지 않아 import.meta.env로 설정이 필요하다.
• 아니면 vite.config.ts에서 define으로 해당 객체의 이름을 지정해주는 방법도 있음

// vite.config.ts
define: {
  'process.env.NODE_ENV': `"${mode}"`,
  'process.env.NODE_DOMAIN': '"external"'
},

Reference

• [@storybook/builder-vite] `process is not defined` error in production bundle.

  Github

  [@storybook/builder-vite] `process is not defined` error in production bundle.

  Updated

  Aug 29, 2023

  

• https://ko.vitejs.dev/guide/env-and-mode.html

• https://dev.to/whchi/how-to-use-processenv-in-vite-ho9

• https://velog.io/@riley_dev/React-vite에서-환경변수-.env-설정하기

• https://khj0426.tistory.com/238