webpack DefinePlugin 사용 방법

React Native 개발 중에 react-native-draggable-flatlist package 를 적용 하여 테스트 하는 도중 Web 환경에서 특정 전역변수가 정의 되지 않아서 오류가 발생하였다.

오류 내용은 : Uncaught ReferenceError : __DEV__ is not defied

접근방법

1. Mobile은 정상 작동
2. 오류 내용 분석 결과 react-native-gesture-handler 의 __DEV__ 전역변수 미선언
3. web 환경에서만 오류 발생 -> webpack 관련 자료 조사
4. webpack의 DefinePlugin 을 알게됨(전역변수를 선언하기 위해서 사용되는 플러그인)
5. webpack.config 파일 수정

const webpack = require("webpack");

module.exports = {
...(생략)
  plugins: [
    new webpack.DefinePlugin({
      __DEV__: process.env.NODE_ENV !== 'production' || true,
    }),
  ]
}

정리

• 사용하려는 package 에서 전역변수를 참조하여 코드가 실행 됨
• web 환경에서만 오류가 발생하므로 webpack 관련 설정 확인
• javascript 에서 전역변수를 관리해주는 webpack의 DefinePlugin 을 적용함

참고자료

참고자료 1 : DEV const breaks the app in bare setup
참고자료 2 : stack overflow [react native web, DEV not defined]
참고자료 3 : 웹팩(Webpack) DefinePlugin, EnvironmentPlugin 사용법