Process is not defined ReferenceError: process is not defined

[j.hernandez.bo]

Hello everyone,
I’m getting the following error

I’m working on a React application (without Vite) and encountered the following error when trying to use Web3Auth modal:

ReferenceError: process is not defined

My Setup

I’m using react-app-rewired to modify the Webpack configuration in my project. Here’s the content of my config-override.js file:

const webpack = require('webpack');

module.exports = function override(config) {
  // Configure fallback for modules that depend on Node.js
  const fallback = config.resolve.fallback || {};
  Object.assign(fallback, {
    process: require.resolve('process/browser'),
    buffer: require.resolve('buffer') // Add buffer module as fallback
  });

  // Assign the new resolve configuration
  config.resolve.fallback = fallback;

  // Add necessary plugins to provide global variables
  config.plugins = (config.plugins || []).concat([
    new webpack.ProvidePlugin({
      process: 'process/browser.js', // Ensure process is properly referenced
      Buffer: ['buffer', 'Buffer'] // Configure correct usage of Buffer
    })
  ]);

  return config;
};

Steps I’ve Tried

1. Installed process and buffer using npm install process buffer.
2. Verified that react-app-rewired is correctly configured.

Despite these configurations, the error persists.

My Question

Has anyone faced this issue and can help me understand how to ensure that process is correctly defined in the browser context with Web3Auth and React?

I appreciate any guidance or additional tips. Thank you in advance!

[w3abot]

Hi Julian! Thanks for reaching out and providing such detailed information about your issue. I can see you are encountering a ReferenceError: process is not defined while integrating Web3Auth in your React application.

Here are the details for the support team:

• SDK Details: Help - Plug n Play
• SDK Version Number: (Please provide if known, as it might help the team)
• Platform: React (using react-app-rewired)

Issue Summary:

• You are getting the error: ReferenceError: process is not defined.
• You are using react-app-rewired to customize webpack configuration to include the necessary fallbacks for process and Buffer.
• Even after following the setup, the error persists.

Additional Information Needed:

• Can you please share the Web3Auth initialization and login code snippets?
• If possible, please provide any relevant browser console screenshots that show the full error context.
• Are you using any custom authentication with a specific provider? If yes, please include the verifier name and the method of login.

Regarding a potential solution, it might be worth checking if you’re correctly importing or using the Web3Auth library configuration. Sometimes, ensuring the library is up to date can help avoid such issues too.

Feel free to provide any extra links or images that might help the support team better understand your integration setup. Thank you again for your patience, and let’s get this resolved!

Note: This response was generated by an AI bot and may require further verification. The Web3Auth support team has tracked this issue and will be responding as soon as possible.

[Ayush]

Hey, can you please check our Polyfill troubleshoot guide. Bundler Polyfill Issues - Webpack 5 | Documentation | Web3Auth

If you are still facing the issue after following the guide, please let us know.

[j.hernandez.bo]

Hi @Ayush now I’m facing an error openning modal WalletInitializationError: Wallet is not ready yet, Login modal is not initialized
at WalletInitializationError.fromCode (index.js:62:1)
at WalletInitializationError.notReady (index.js:73:1)
at Web3Auth.connect (modalManager.js:327:1)
at Web3AuthInnerContext.js:50:1
at connectWallet

Here is the context config used in Web3AuthProvider:

import { Web3AuthOptions } from "@web3auth/modal";
import { CHAIN_NAMESPACES, CustomChainConfig, UX_MODE, WEB3AUTH_NETWORK } from "@web3auth/base";
import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";
import { getDefaultExternalAdapters } from "@web3auth/default-evm-adapter";
import { AuthAdapter, MFA_LEVELS } from "@web3auth/auth-adapter";
import { BUTTON_POSITION, CONFIRMATION_STRATEGY, WalletServicesPlugin } from "@web3auth/wallet-services-plugin";


const clientId = "MyClientId";


const kiiChain: CustomChainConfig = {
  chainId: "0x75BC371",
  rpcTarget: "https://a.sentry.testnet.kiivalidator.com:8645",
  displayName: "KII Testnet",
  blockExplorerUrl: "https://app.kiichain.io/kiichain",
  ticker: "KII",
  tickerName: "KII",
  logo: "https://images.toruswallet.io/eth.svg",
  chainNamespace: CHAIN_NAMESPACES.EIP155
};

const privateKeyProvider = new EthereumPrivateKeyProvider({
  config: {
    chainConfig: kiiChain,
  },
});


const web3AuthOptions: Web3AuthOptions = {
  chainConfig: kiiChain,
  clientId,
  web3AuthNetwork: WEB3AUTH_NETWORK.TESTNET,
  privateKeyProvider,
};

const adapters = getDefaultExternalAdapters({ options: web3AuthOptions });
const authAdapter = new AuthAdapter({
  loginSettings: {
    mfaLevel: MFA_LEVELS.NONE,
  },
  adapterSettings: {
    uxMode: UX_MODE.POPUP,
  },
});
const walletServicesPlugin = new WalletServicesPlugin({
  wsEmbedOpts: {},
  walletInitOptions: {
    whiteLabel: { showWidgetButton: true, buttonPosition: BUTTON_POSITION.BOTTOM_RIGHT },
    confirmationStrategy: CONFIRMATION_STRATEGY.MODAL,
  },
});
const web3AuthContextConfig = {
  web3AuthOptions,
  adapters: [authAdapter, ...adapters],
  plugins: [walletServicesPlugin],
};

export default web3AuthContextConfig;

[Ayush]

Can you share the details of the SDK you are using? Please share all the Web3Auth SDKs you are using with versions from pubspec.

[j.hernandez.bo]

Sure @Ayush , I’m using this:

"@web3auth/base": "^9.4.0",
"@web3auth/default-evm-adapter": "^9.4.0",
"@web3auth/ethereum-provider": "^9.4.0",
"@web3auth/modal": "^9.4.0",
"@web3auth/modal-react-hooks": "^9.4.0",
"@web3auth/wallet-services-plugin": "^9.4.0",
"@web3auth/wallet-services-plugin-react-hooks": "^9.4.0",

[shahbaz]

Hey @j.hernandez.bo

Were you able to resolve this? If not, please reply to this post