Jeffrey Cincotta Jeffrey Cincotta - 1 month ago 25
React JSX Question

Need to secure my API keys in react Using 'dotenv' but I am getting an error `cannot resolve module 'fs'`

This is my main.js.
ERROR in ./~/dotenv/lib/main.js
Module not found: Error: Cannot resolve module 'fs'
I want to protect my .env variables. When I run this code in node it works but on the app itself it fails out. I am new to coding and currently in a bootcamp...please be gentle...haha.

import 'babel-polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import Ticket from './components/Ticket';
let dotenv = require('dotenv');
let ticketMasterKey = process.env.TICKETMASTER_KEY;
$(function() {
ReactDOM.render(
<Ticket />,
document.getElementById('app')
);
});

Answer

You cannot use dotenv in react because dotenv is designed to work in node, not in browsers. If you are using webpack, you can use the dot-env webpack plugin.

Comments