Having troubles migrating no modal sdk from v9 to 10

Embedded Wallets (Web3Auth)
1

  • Describe your issue or question:

    • Which platform or framework are you using:VUe2?

    • Prevoioulsy using @web3auth/auth-adapter 9.7.0, @web3auth/no-modal 9.7.0, @web3auth/auth-adapater 9.7.0, migrating to @web3auth/modal 10.5.4 and @web3auth/ethereum-provider:9.7.0 ?

    • What is not working as expected? I can not initialize web3auth although i am following the steps in your migration guide

  • Code snippets:

‘import { Web3Auth, WEB3AUTH_NETWORK, CHAIN_NAMESPACES } from ‘@web3auth/modal’;

import { EthereumPrivateKeyProvider } from '@web3auth/ethereum-provider

async initWeb3Auth() {

  try {

const clientId = process.env.VUE_APP_CLIENT_ID;

const blockExplorer = this.chainId === 31 ? ‘https://explorer.testnet.rsk.co/’ : ‘https://explorer.rsk.co/’;

const ticker = this.chainId === 31 ? ‘tRBTC’ : ‘RBTC’;

const tickerName = this.chainId === 31 ? ‘rBTC Testnet’ : ‘rBTC Mainnet’;

const rpcTarget = this.chainId === 31

? process.env.VUE_APP_RSK_NODE_TESTNET : process.env.VUE_APP_RSK_NODE;

const displayName = this.chainId === 31 ? ‘RSK Testnet’ : ‘RSK Mainnet’;

const chainIdValue = this.chainId === 31 ? ‘0x1f’ : ‘0x1E’;

const chainConfig = {

chainNamespace: CHAIN_NAMESPACES.EIP155,

chainId: chainIdValue,

rpcTarget,

displayName,

blockExplorer,

ticker,

tickerName,

    };

const privateKeyProvider = new EthereumPrivateKeyProvider({

config: { chainConfig },

    });

const web3AuthOptions = {

clientId,

web3AuthNetwork: WEB3AUTH_NETWORK.MAINNET,

privateKeyProvider,

    };

const web3AuthInstance = new Web3Auth(web3AuthOptions);

await web3AuthInstance.init();

this.setWeb3AuthInstance(web3AuthInstance);

  } catch (error) {

console.error('error: ', error);

  }

},

';

  • Exact error and logs: ‘Error: Invalid params passed in, Please provide a valid chainId as hex string in chains for chain 31
    at overrideDefaultMethod (loglevel-sentry.js:107:30)
    at Logger.eval [as error] (loglevel-sentry.js:153:13)Caused by: WalletInitializationError: Invalid params passed in, Please provide a valid chainId as hex string in chains for chain 31
    at WalletInitializationError.fromCode (index.js:54:12)
    at WalletInitializationError.invalidParams (index.js:89:38)
    at Web3Auth.initChainsConfig (noModal.js:436:92)
    at Web3Auth.init (modalManager.js:144:13)
    at async VueComponent.initWeb3Auth (index.js??clonedRuleSet-40.use[0]!./node_modules/cache-loader/dist/cjs.js??ruleSet[0].use[0]!./node_modules/@vue/cli-service/lib/config/vue-loader-v15-resolve-compat/vue-loader.js??vue-loader-options!./src/components/container/Container.vue?vue&type=script&lang=js:269:9) ‘Failed to initialize modal’’

  • Package details: ‘ “@web3auth/ethereum-provider”: “^9.7.0”,

    "@web3auth/modal": "^10.5.4",'
2

Hi Natalia — thanks for the clear report. I pulled the important bits and wrote a few concrete things to try so the support team can help faster.

Summary of what you provided

  • SDK / integration: MetaMask Embedded Wallets (Web3Auth)
  • Packages & versions reported: @web3auth/modal v10.5.4, @web3auth/ethereum-provider v9.7.0 (you also mentioned previously using @web3auth/no-modal 9.7.0)
  • Platform / framework: Vue 2
  • Init code snippet: included (initializing EthereumPrivateKeyProvider with config: { chainConfig } and passing privateKeyProvider in Web3Auth options)
  • Exact error: WalletInitializationError: “Invalid params passed in, Please provide a valid chainId as hex string in chains for chain 31”
  • Provided chainId value in code: ‘0x1f’ (for chain 31)

Likely causes

  1. Web3Auth v10 expects the chain configuration to be provided on the Web3Auth constructor (chainConfig) rather than only inside the provider. If Web3Auth doesn’t see a valid chain config it runs a chains validation and throws this WalletInitializationError.
  2. Version mismatch between @web3auth/modal (v10.x) and @web3auth/ethereum-provider (v9.7.0) can cause breaking behavior. It’s best to align major versions when migrating (use v10-compatible @web3auth packages).
  3. Chain id formatting — it must be a hex string with 0x prefix (you have ‘0x1f’, which should be valid), but Web3Auth needs that exact value present on the Web3Auth constructor.

Recommended quick fixes to try

  1. Move chainConfig into the Web3Auth constructor (and also pass it to the privateKey provider). Example pattern:

const chainConfig = {
chainNamespace: CHAIN_NAMESPACES.EIP155,
chainId: chainIdValue, // “0x1f”
rpcTarget,
displayName,
blockExplorer,
ticker,
tickerName,
};

const web3AuthInstance = new Web3Auth({
clientId,
web3AuthNetwork: WEB3AUTH_NETWORK.MAINNET,
chainConfig, // ← important for v10
// other modal options if needed
});

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

await web3AuthInstance.init();

  1. Align package versions: upgrade @web3auth/ethereum-provider to a v10-compatible release (or use a consistent set of @web3auth packages that are tested together). Mismatched majors between modal (v10) and provider (v9) can cause unexpected initialization errors.

  2. Double-check the chainId value at runtime to confirm it’s a string and not accidentally a number: console.log(typeof chainConfig.chainId, chainConfig.chainId) should print “string” and “0x1f”.

If this doesn’t fix it

  • Please confirm the exact versions of all @web3auth packages in your package.json (so support can check compatibility). If you can, paste the package.json deps or a small list.
  • Share the full initialization code (you already gave a good snippet — if there are other places you pass chain info to Web3Auth or modal config please include that).
  • A console screenshot or full browser console logs around the error would help (you already pasted the stack trace which is helpful).

References

  • Follow the v10 migration pattern: ensure chainConfig is supplied to the Web3Auth constructor and keep packages on compatible major versions.

If you want, I can draft the exact minimal changes to your file (with your variable names) so you can paste and run it — would you like that? Also let me know your exact @web3auth/* versions from package.json and I’ll check for any known incompatibilities.

Note: This response was generated by an AI bot and may require further verification. The MetaMask Community 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. MetaMask Developer Office Hours

3

following the previous suggestion, i included de chainCOnfig into the web3auth constructor and validated than chainId is a string, however i still can not initialize web3auth. IN this version i am no longer using the '@web3auth/ethereum-provider, although this is ypur recommendation in the migration guide: Migrating to the Web3Auth PnP Web SDK v10 from v9 (No-Modal) | MetaMask developer documentation

import { Web3Auth, WEB3AUTH_NETWORK, CHAIN_NAMESPACES } from '@web3auth/modal';
 async initWeb3Auth() {
      try {
        const clientId = process.env.VUE_APP_CLIENT_ID;
        const blockExplorer = this.chainId === 31 ? 'https://explorer.testnet.rsk.co/' : 'https://explorer.rsk.co/';
        const ticker = this.chainId === 31 ? 'tRBTC' : 'RBTC';
        const tickerName = this.chainId === 31 ? 'rBTC Testnet' : 'rBTC Mainnet';
        const rpcTarget = this.chainId === 31
          ? process.env.VUE_APP_RSK_NODE_TESTNET : process.env.VUE_APP_RSK_NODE;
        const displayName = this.chainId === 31 ? 'RSK Testnet' : 'RSK Mainnet';
        const chainIdValue = this.chainId === 31 ? '0x1f' : '0x1E';

        const chainConfig = {
          chainNamespace: CHAIN_NAMESPACES.EIP155,
          chainId: chainIdValue,
          rpcTarget,
          displayName,
          blockExplorer,
          ticker,
          tickerName,
        };
        console.log(typeof chainConfig.chainId, chainConfig.chainId);

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

        const web3AuthOptions = {
          clientId,
          web3AuthNetwork: WEB3AUTH_NETWORK.MAINNET,
          chainConfig,
          whiteLabel: {
            name: 'Tropykus',
            url: 'https://tropykus.finance',
            logoLight: 'https://web3auth.io/images/w3a-L-Favicon-1.svg',
            logoDark: 'https://web3auth.io/images/w3a-D-Favicon-1.svg',
            defaultLanguage: 'es',
            dark: false,
            theme: {
              primary: '#00D1B2',
            },
          },
        };
        console.log('🚀 ~ web3AuthOptions:', web3AuthOptions);

        const web3AuthInstance = new Web3Auth(web3AuthOptions);

        /* const authAdapter = new AuthAdapter(); */
        /* web3AuthInstance.configureAdapter(authAdapter); */
        await web3AuthInstance.init();
        this.setWeb3AuthInstance(web3AuthInstance);
      } catch (error) {
        console.error('error: ', error);
      }
    },

Captura desde 2025-10-27 15-47-32
Captura desde 2025-10-27 15-47-321252×741 121 KB

4

Hey @Natalia_Munoz

You do not need to provide any chain details in the latest embedded wallets sdk. You can just go to the new web3auth dashboard and add your chain details, the SDK will automatically fetch them.

Please check here: Chains and Networks | MetaMask developer documentation