Issue with Named Export 'CHAIN_NAMESPACES' in Svelte Application using Web3Auth

[emusebe9]

I’m developing a Svelte application using TypeScript and have integrated Web3Auth (version 7.2.0) for authentication with the Solana blockchain. I am encountering an issue during the build process specifically related to importing named exports from the ‘@web3auth/base’ module. The application builds and runs fine on localhost, but I face this problem when building for production.

Here are the details:

• SDK Version: @web3auth/base 7.2.0

• Platform: Building on macOS

• Node.js Version: v20.10.0

• Error Description: When building the application, I receive a SyntaxError related to the import of CHAIN_NAMESPACES from ‘@web3auth/base’. The error message indicates that the module is a CommonJS module and may not support all module.exports as named exports. The specific error is:

  SyntaxError: Named export 'CHAIN_NAMESPACES' not found. The requested module '@web3auth/base' is a CommonJS module, which may not support all module.exports as named exports.
  

• Web3Auth Initialization Code:

  import { Web3Auth } from "@web3auth/modal";
  import { CHAIN_NAMESPACES } from "@web3auth/base";
  import { SolanaPrivateKeyProvider } from "@web3auth/solana-provider";
  import { OpenloginAdapter } from "@web3auth/openlogin-adapter";
  
  export const chainConfig = {
      chainNamespace: CHAIN_NAMESPACES.SOLANA,
      chainId: "0x3", // Mainnet
      rpcTarget: "https://summer-frosty-friday.solana-devnet.quiknode.pro/5430f85cfb9a90ac2763131b24d8a746f2d18825",
      displayName: "Sapphire Devnet",
      blockExplorer: "https://explorer.solana.com",
      ticker: "SOL",
      tickerName: "Solana",
  };
  

Could you please help me understand why this issue is occurring and how I can resolve it? Are there specific configurations or changes required in the Svelte TypeScript setup to correctly handle CommonJS modules or any additional steps to ensure compatibility with Web3Auth’s latest version?

Thank you for your assistance.

[emusebe9]

I was able to solve the issue of TypeScript errors at build time when importing named exports from the @web3auth/base CommonJS module in a Svelte TypeScript application by making the following key adjustments:

1. Switching to Default Imports:

   • Replaced named imports with default imports for CommonJS modules, addressing the compatibility issue with TypeScript.
   • For instance, instead of import { CHAIN_NAMESPACES } from "@web3auth/base";, the code was changed to:

     import Web3AuthBase from "@web3auth/base";
     const { CHAIN_NAMESPACES } = Web3AuthBase;
     

2. Handling Asynchronous Imports:

   • Ensured that the application’s logic waits for the dynamic imports of Web3Auth to complete, which is crucial for modules that are not immediately available.
   • Implemented this using the async/await pattern, promoting clean, readable code and resolving any asynchronous import issues.
   • Example:

     async function initializeWeb3Auth() {
         const Web3AuthBase = await import("@web3auth/base");
         const { CHAIN_NAMESPACES } = Web3AuthBase;
     
         // ... Continue with further module imports and Web3Auth initialization
     }
     

These modifications successfully resolved TypeScript errors at build time, allowing for the correct import and use of Web3Auth in the Svelte TypeScript environment, especially in a production setting.