Problem with Web3 Environment Variables in React App
I’m working on a digital asset minting application using React and Web3 libraries. The project was going smoothly until I hit a roadblock with environment variable loading.
The issue started when I added this code to my blockchain helper file:
require('dotenv').config();
const infuraEndpoint = process.env.REACT_APP_INFURA_URL;
const { createAlchemyWeb3 } = require("@alch/alchemy-web3");
const web3Instance = createAlchemyWeb3(infuraEndpoint);
As soon as I try to import the dotenv package in my /src/helpers/blockchain.js file, webpack throws multiple compilation errors. The main issues seem to be related to missing Node.js core modules like ‘stream’, ‘fs’, ‘path’, ‘crypto’, ‘assert’, ‘http’, ‘https’, ‘url’, and ‘os’.
The error messages all mention that webpack 5 no longer includes polyfills for Node.js core modules by default, and suggest adding fallback configurations or installing browserify alternatives.
I understand this is a common issue when trying to use Node.js specific packages in a browser environment, but I’m not sure what the best approach is for handling environment variables in a React Web3 project. Should I configure webpack polyfills or is there a better way to manage API keys and endpoints in this setup?
Has anyone encountered similar issues when building blockchain applications with React? What’s the recommended solution?
had the exact same webpack nightmare last month! besides removing dotenv like others mentioned, double check you’re not accidentally importing any node modules elsewhere in your web3 helpers. sometimes the error traces can be misleading and point to the wrong file. also make sure your .env file doesnt have any extra spaces around the = sign - react can be picky about that formatting.
oh interesting! I’ve been down this rabbit hole before too and it’s definitely frustrating when webpack starts throwing those polyfill errors everywhere.
Just curious though - are you planning to keep all your web3 logic purely on the frontend? I noticed you’re using alchemy which is great, but have you considered what happens when your api keys are exposed in the browser bundle? Even with the REACT_APP_ prefix, those variables end up visible to anyone who inspects your built app.
What kind of minting functionality are you building exactly? If it’s anything that involves sensitive operations, you might want to think about setting up a simple backend api to handle the web3 calls and keep your keys truly private. I made that mistake early on and had to refactor later when I realized my infura key was just sitting there in the compiled js for everyone to see lol
Also, have you tried using ethers.js instead of the alchemy web3 package? Sometimes switching libraries can avoid some of these weird dependency conflicts entirely. Just wondering what your setup requirements are - maybe there’s a cleaner path forward depending on what you’re trying to accomplish with the minting app?
You don’t actually need to import dotenv in your React frontend code at all. The require('dotenv').config() line is causing your webpack issues because dotenv is meant for Node.js server environments, not browser applications. React automatically loads environment variables that start with REACT_APP_ from your .env file during the build process. Simply remove the dotenv import and configuration line from your blockchain helper file. Your code should look like this: javascript const infuraEndpoint = process.env.REACT_APP_INFURA_URL; const { createAlchemyWeb3 } = require("@alch/alchemy-web3"); const web3Instance = createAlchemyWeb3(infuraEndpoint); Make sure your .env file is in your project root directory and contains your variable like REACT_APP_INFURA_URL=your_url_here. After removing the dotenv import, your webpack errors should disappear completely. This approach keeps your environment variables secure while avoiding unnecessary Node.js polyfills in the browser bundle.