[Trouble Shooting] Refernece Error: process is not defined

⚠️ 에러 내용

React와 Webpack으로 Boilerplate를 만드는 과정에서 process.env를 적용했을 때 다음과 같은 에러가 발생했다.

 

📌 에러 원인

해결 방법은 스택오버플로우를 통해서 확인할 수 있었습니다

이 그림을 클릭하시면 링크로 이동합니다.

 

Webpack v5부터는 node.js polyfill이 자동적으로 적용되는 기능이 제거가 되었기에,
필요한 모듈은 직접 설치를 해줘야 했다.

 

 

 

✅ 해결 방법

해결 방법은 간단하다. 패키지를 설치한 뒤, 

# process를 위한 패키지 설치
$ yarn add -D process

 

webpack.config.js의 plugins에 추가만 해주면 된다. 

// -------중략----------  
plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
      minify: {
        collapseWhitespace: true, // 빈칸 제거
        removeComments: true, // 주석제거
      },
    }),
    new CleanWebpackPlugin(),
    new webpack.ProvidePlugin({
      process: 'process/browser.js',
    }),
  ],