Expo ReactNative Storybook 도입시 Constants.expoConfig.extra.storybookEnabled === undefined in windows

발단 : ReactNative 로 스토리북 연습하려고 했을 시 Constants.expoConfig.extra.storybookEnabled === undefined 오류

windows유저들은 억울하다 

공식문서를 보고 

https://dev.to/dannyhw/how-to-swap-between-react-native-storybook-and-your-app-p3o

How to swap between React Native Storybook and your app

위의 링크를 따라했는데도 

 

 

 

undefined가 나오는 세상에서 살고있기 때문이다

 

원인 : windows의 환경변수 불러오기 문제 

이건 expo의 app.config.js에서 process.env를 불러올때 시스템 환경변수를 불러오기 때문에 발생하는 문제입니다.

공식문서에 적힌대로 바벨 플러그인도 깔아서 해봤는데 App.config.js 코드에선 안먹혔어요.

아마 1번 2번 방법을 사용하지 않는 이상 계속 process.env는 undefined일 거에요

 

방법 :

 

방법은 세가지

 

1. 윈도우 환경변수 세팅에 들어가서 -> 고급시스템 설정 -> 환경변수 -> 설정해주기

2. cmd set process.env.storybookEnabled = 설정해주기

3.dotenv 사용하기

https://rangsub.tistory.com/111

 

세번째 방법을 사용한 이유는 간단하다.

1번 방법을 쓰기엔 너무 귀찮았고

2번 방법을 쓰기엔 매번 커맨드를 쳐야해서 귀찮았다

3번 .env 파일을 이용해 스토리북 키고 끌 때 true/false로 복붙하는게 제일 나을것 같았다.

 

해결

npm install dotenv --save

dotenv를 깔아주세요

 

 

위와같이 "true"로 쳐주세요, true로 쳐도 상관없습니다

 

소스코드를 수정해주세요

 

Mac 유저의 경우는 Constants.expoConfig?.extra?.storybookEnabled가 true로 나오고

Windows 유저의 경우엔 .env 파일에서 설정해준 true가 나와서 아래의 코드가 실행되고 스토리북이 실행된다.

 

굳이 이렇게 코드를 쓴 이유는

Mac 유저인 제 팀원과 Windows 유저인 저의 협업때문이에요.

파일을 수정하지 않고최대한 소스코드를 공유하기 위해서 입니다.

필요 시 .env 파일을 수정하는건 Windows 유저로 충분하니까요 :)

 

 

번외로 마구 찾다보니까 유용한 정보도 얻을 수 있었어요

Priorities of env files : 

env 파일의 우선순위 입니다 유용한것 같아요

 

 

References:

 

https://blog.logrocket.com/understanding-react-native-env-variables/#what-process-env

Understanding React Native env variables - LogRocket Blog

https://dev.to/dannyhw/how-to-swap-between-react-native-storybook-and-your-app-p3o

How to swap between React Native Storybook and your app

https://rangsub.tistory.com/111

[node.js - npm] dotenv - [환경변수 설정]

 

오타 및 오류를 발견하신다면 언제든 댓글 남겨주세요!@