Error when calling web3auth.value.init()

Help - Plug n Play PnP Web SDKs
1

Hello!
I have an issue with initializing web3auth. The specific error I get is the following:
postMessageStream.ts:22 Uncaught DOMException: Failed to execute 'postMessage' on 'Window': #<Object> could not be cloned.

Full component code (adapted from react-vite-evm-no-modal-example)

<template>
  <div id="app">
    <button class="card" style="cursor: pointer" @click="login">Login</button>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref, type Ref } from 'vue';
import { Web3AuthNoModal } from '@web3auth/no-modal';
import { CHAIN_NAMESPACES, WALLET_ADAPTERS } from '@web3auth/base';
import { OpenloginAdapter } from '@web3auth/openlogin-adapter';

const clientId = import.meta.env.VITE_CLIENT_ID;

const web3auth = ref(null) as Ref<Web3AuthNoModal | null>;

onMounted(async () => {
  const auth = new Web3AuthNoModal({
    clientId,
    chainConfig: {
      chainNamespace: CHAIN_NAMESPACES.EIP155,
      chainId: '0x1',
      rpcTarget: 'https://rpc.ankr.com/eth', // This is the public RPC we have added, please pass on your own endpoint while creating an app
    },
    web3AuthNetwork: 'cyan',
  });

  const openloginAdapter = new OpenloginAdapter({
    loginSettings: {
      mfaLevel: 'default',
    },
    adapterSettings: {
      whiteLabel: {
        name: 'Your app Name',
        logoLight: 'https://web3auth.io/community/images/w3a-L-Favicon-1.svg',
        logoDark: 'https://web3auth.io/community/images/w3a-D-Favicon-1.svg',
        defaultLanguage: 'en',
        dark: true, // whether to enable dark mode. defaultValue: false
      },
    },
  });

  auth.configureAdapter(openloginAdapter);

  web3auth.value = auth;

  try {
    await web3auth.value.init();
  } catch (error) {
    console.log('🚀 ~ file: TestLoginPage4.vue:55 ~ onMounted ~ error:', error);
  }
});

const login = async () => {
  const web3authProvider = await web3auth.value!.connectTo(
    WALLET_ADAPTERS.OPENLOGIN,
    {
      loginProvider: 'google',
    }
  );
};
</script>

My vite.config.ts:

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { quasar, transformAssetUrls } from '@quasar/vite-plugin';
import { nodePolyfills } from 'vite-plugin-node-polyfills';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue({
      template: { transformAssetUrls },
    }),

    quasar({
      sassVariables: 'src/css/quasar.variables.sass',
    }),
    nodePolyfills({
      // Whether to polyfill `node:` protocol imports.
      protocolImports: true,
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
  build: {
    outDir: './dist/spa',
  },
  server: {
    hmr: {
      overlay: false,
    },
  },
});
2

I think this error is happening because web3auth instances cant be stored in vue ref.
To solve this issue, consider removing const web3auth = ref(null) as Ref<Web3AuthNoModal | null>; and may be use a static wrapper class around web3auth instance.

3

I’ll try this sollution. Thanks!

4

It worked! Thank you! But could this perhaps be specified somewhere in the docs? Maybe in the troubleshooting section.

1 Like