Failed to parse source map from '*/node_modules/enc-utils/src/index.ts' file: Error: ENOENT: no

Help - Plug n Play PnP Web SDKs
1

When asking for help in this category, please make sure to provide the following details:

WARNING in ./node_modules/enc-utils/dist/cjs/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from ‘/node_modules/enc-utils/src/index.ts’ file: Error: ENOENT: no such file or directory, open '/node_modules/enc-utils/src/index.ts’

Also, kindly provide the Web3Auth initialization and login code snippet below. This will help us better understand your issue and provide you with the necessary assistance.

const chainConfig = {
chainNamespace: CHAIN_NAMESPACES.EIP155,
chainId: “0xA869”, // hex of 43113
rpcTarget: “https://api.avax-test.network/ext/bc/C/rpc”,
// Avoid using public rpcTarget in production.
// Use services like Infura
displayName: “Avalanche C-Chain Testnet”,
blockExplorerUrl: “Explorer | Avalanche”,
ticker: “AVAX”,
tickerName: “AVAX”,
logo: “https://cryptologos.cc/logos/avalanche-avax-logo.png”,
};

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

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

useEffect(() => {
const init = async () => {
try {
const web3authInstance = new Web3Auth(web3AuthOptions);
setWeb3auth(web3authInstance);
await web3authInstance.initModal();
} catch (error) {
console.error(“Error initializing Web3Auth:”, error);
}
};
init();
}, []);

2

Hi Mahesh,

Thank you for providing detailed information about your issue. Let’s break down the key points:

  • SDK Details: You’re using the Web3Auth PnP Web SDK.
  • SDK Version: ^9.7.0
  • Platform: React
  • Issue: The main error message is “Buffer is not defined” in the browser console. This is usually related to the environment configuration when using Node.js packages in a browser environment. Additionally, you mentioned a warning about failing to parse the source map for the enc-utils package.

Suggested Solutions:

  1. Buffer Error: The “Buffer is not defined” issue is common when the buffer isn’t polyfilled in a React or Web environment. You can add the following polyfill to the top of your main entry file (e.g., index.js):

    import { Buffer } from 'buffer';
window.Buffer = Buffer;

    You might need to install the buffer package using npm:

    npm install buffer

  2. Source Map Warning: This warning is usually related to development build configurations and missing source map files. It doesn’t often impact functionality but can be addressed by ensuring correct build configurations or ignoring the warning:

    Add the following to your webpack.config.js (if applicable):

    module.exports = {
  // ... rest of your webpack config
  devtool: 'source-map', // or 'inline-source-map'
  resolve: {
    fallback: {
      buffer: require.resolve('buffer/') // ensures Buffer polyfill is available
    }
  }
};

  3. For Web3Auth Configuration: Your initialization and login snippet looks correctly set up for the Avalanche C-Chain Testnet. Ensure your clientId is correctly provided and that the AVAX RPC URL is working properly.

If you continue to face issues, you might want to explore similar discussions on the Web3Auth Community Forum or check the Web3Auth Developer Documentation.

Please try these steps, and let me know if you need further assistance. We’re here to help!

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.

Additionally, we would recommend you to join our biweekly Office Hours to get this resolved even faster. Web3Auth Developer Office Hours

3

I created the app using npx create-react-app.
Was able to resolve issue after reading

Thank you

4

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.