[NodeJS] 이유를 알 수 없는 오류 process is not defined

 

ReactJS + Webpack5 + React-refresh 조합으로 변경 중 굉장히 심각한 사태 발발함.

 

path.js:25 Uncaught ReferenceError: process is not defined
    at eval (path.js:25:1)
    at ./node_modules/path/path.js (main-9dd8e511eae3f7488f14.js:5817:1)
    at options.factory (main-9dd8e511eae3f7488f14.js:9481:31)
    at __webpack_require__ (main-9dd8e511eae3f7488f14.js:8908:32)
    at fn (main-9dd8e511eae3f7488f14.js:9139:21)
    at eval (main.js:2:1)
    at ./node_modules/dotenv/lib/main.js (main-9dd8e511eae3f7488f14.js:3446:1)
    at options.factory (main-9dd8e511eae3f7488f14.js:9481:31)
    at __webpack_require__ (main-9dd8e511eae3f7488f14.js:8908:32)
    at fn (main-9dd8e511eae3f7488f14.js:9139:21)

 

해당 코드 분석해본 결과 내가 해결할 수 없음을 깨닫게 되어

땅을 치고 눈물을 흘리고 있을 때 해결책을 발견하였음.

 

module.exports = {
  ...,
  plugins: [
    isDevelopment && new ReactRefreshWebpackPlugin(),
    new MiniCssExtractPlugin(),
    new HtmlWebpackPlugin({ template: "public/index.html" }),
    new webpack.ProvidePlugin({
      process: "process/browser"
    })
  ].filter(Boolean),
  ...
}

 

위의 코드는 webpack.config.js 파일의 일부임.

Config 파일에서 plugins 부분에 new webpack.ProvidePlugin을 통해 process를 지정하여 문제를 해결함