[React] React에서 dotenv 사용 시 오류. (Module not found: Error: Can't resolve 'fs' in '/Users/~/Desktop/React/~/node_modules/dotenv/lib')

React 프로젝트에서 dotenv로 환경변수를 관리해주려고 할 때 생겼던 오류.

.env파일은 루트 폴더 위치에, 환경변수를 사용하는 파일은 src 폴더 내에 존재할 때.

 

Error Message

ERROR in ./node_modules/dotenv/lib/main.js 1:11-24

Module not found: Error: Can't resolve 'fs' in '/Users/~/Desktop/React/~/node_modules/dotenv/lib'


ERROR in ./node_modules/dotenv/lib/main.js 3:13-28

Module not found: Error: Can't resolve 'path' in '/Users/~/Desktop/React/~/node_modules/dotenv/lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
	- install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "path": false }


ERROR in ./node_modules/dotenv/lib/main.js 5:11-24

Module not found: Error: Can't resolve 'os' in '/Users/~/Desktop/React/~/node_modules/dotenv/lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "os": require.resolve("os-browserify/browser") }'
	- install 'os-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "os": false }

 

해결

import dotenv from "dotenv" 
dotenv.config() 

비슷한 것들 다 지우면 된다.

 

create-react-app 으로 만든 react 프로젝트는... dotenv 가 내장되어 있단다.

역시 React 편하다;

 

Reference

db2dev.tistory.com/entry/React-Webpack으로-구축한-React-프로젝트에서-환경-변수env-사용하기