ABOUT ME

프론트엔드 개발자 권오연입니다. 프론트는 React, 백엔드에선 Node.js 를 주로 사용합니다. 페어 프로그래밍을 통해 배운 문제 해결 방법, 커뮤니케이션 스킬을 잊지 않기 위해 블로그에 꾸준히 정리하며 공부하고 있습니다.

Today
Yesterday
Total
  • React 앱에서 dotenv 실행 시 Uncaught Error: Cannot find module 'fs'
    error handling 2022. 8. 15. 15:36

    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_을 꼭 붙여주어야 함!

    'error handling' 카테고리의 다른 글

    댓글

Designed by Tistory.