[webpack] process is not defined

🍕 에러 발생 시점

 

- react를 사용한 프로젝트 진행 중, 환경변수를 process.env로 접근하려 하자 위와 같은 에러가 발생했다.

- 기존 프로젝트는 위와 같은 방법으로 진행했을 때 문제가 없었으나 현재 진행중인 프로젝트에서 문제가 발생했다.

- 기존 프로젝트는 React 프로젝트 생성에 CRA를 사용했고 지금의 프로젝트는 직접 webpack을 설정했는데 이 차이에서 해당 에러의 원인을 찾아볼 수 있을 것이라 생각해 서치해봤다.

🍔 문제 해결

dotenv 라이브러리 설치 후 다음과 같이 코드를 작성해 해결했다.

// webpack.common.js
const webpack = require('webpack');
const dotenv = require('dotenv');

dotenv.config();

module.exports = () => {
        
        // ...
        
        plugins: [
            new webpack.DefinePlugin({
                'process.env': JSON.stringify(process.env),
            }),
        ],
    };
};

 

- dotenv를 통해 JSON.stringify의 매개변수로 들어간 process.env에 접근할 수 있게 되었다.

- react 프로젝트에서도 해당 process.env 변수에 접근이 가능하도록 DefinePlugin을 통해 정의해준다.

 

🦅 REFERENCE

[React] Webpack으로 구축한 React 프로젝트에서 환경 변수(.env) 사용하기