React and web3.js environmental variable loading problem in NFT project

NFT
1

I’m working on an NFT Minter project using React and web3.js. When I try to import the .env file in the interact.js file, I get a bunch of errors. The main issue seems to be with webpack not finding certain modules.

Here’s a snippet of my code:

require('dotenv').config();
const magicKey = process.env.REACT_APP_MAGIC_KEY;
const { createMagicWeb3 } = require('@magic/magic-web3');
const web3 = createMagicWeb3(magicKey);

The errors mention problems with resolving modules like ‘stream’, ‘fs’, ‘path’, ‘crypto’, ‘assert’, ‘http’, ‘https’, and ‘os’. It looks like webpack 5 doesn’t include polyfills for these Node.js core modules by default anymore.

Has anyone run into this issue before? How can I fix these module resolution problems? I’m not sure if I need to add fallbacks or install additional packages. Any advice would be great!

2

hey there hugo! i’ve actually run into similar issues with webpack 5 and react before. it can be a real pain, right? :sweat_smile:

have you tried using the ‘react-app-rewired’ package? it lets you override the webpack config without ejecting from create-react-app. you could add fallbacks for those node modules in the config.override.js file.

something like this might work:

const webpack = require('webpack');

module.exports = function override(config) {
  config.resolve.fallback = {
    ...config.resolve.fallback,
    stream: require.resolve('stream-browserify'),
    crypto: require.resolve('crypto-browserify'),
    // add others as needed
  };
  
  return config;
}

then you’d need to install the browserify versions of those modules. it’s a bit of a hassle, but it might solve your problem without having to eject.

what do you think? have you tried any other solutions yet?

3

I encountered a similar issue in my recent project. One effective solution is to use the ‘react-scripts’ package version 4.x instead of 5.x. This older version includes Node.js polyfills by default, which can resolve many of these module resolution problems without additional configuration.

To downgrade, you can modify your package.json file:

"react-scripts": "^4.0.3"

Then run npm install or yarn install to update dependencies. This approach often resolves these webpack-related issues without requiring complex rewiring or additional configuration. It’s a simpler fix that might save you time and effort in the long run.

Remember to test thoroughly after making this change, as there might be some compatibility issues with other dependencies.

4

yo hugo, that’s a tricky one! have u considered using create-react-app with craco? it’s pretty sweet for customizing webpack without ejecting. just add a craco.config.js file and throw in some polyfills:

module.exports = {
  webpack: {
    configure: {
      resolve: {
        fallback: {
          stream: require.resolve('stream-browserify'),
          // add other polyfills here
        }
      }
    }
  }
}

might save u some headaches. good luck with ur nft project!