React 앱에서 dotenv 실행 시 Uncaught Error: Cannot find module 'fs'

React 에서 env 파일을 사용하고자 env를 설치하고, 다음과 같이 코드를 작성

import React, { useState, useEffect } from 'react';
import './App.css';
import dotenv from 'dotenv';

dotenv.config()


function App() {

  console.log(process.env.REACT_APP_API_KEY)

  return (
    <div className="App">
      앱
    </div>
  );
}

export default App;

 

다음과 같은 오류가 나타났다.

 

 

 

 

nodejs 환경에서는 dotenv import 가 필요하지만, create-react-app으로 구축한 리액트에서는 이미 dotenv가 내장되어 있기 때문에 import를 할 필요가 없음.

 

import dotenv from 'dotenv';

dotenv.config()

 

해당 코드를 지워주면 정상적으로 동작한다.

 

 

단, 그렇기 때문에 리액트에서 환경변수를 사용할 때는

REACT_APP_API_KEY=asdfasdf

이렇게 환경변수 앞에 REACT_APP_을 꼭 붙여주어야 함!