Archived Content from Web3Auth Community
This topic was originally posted by denisa.halmaghi on 3/23/2023.
This content has been migrated from our previous community forum to preserve valuable discussions.
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.
- SDK Version:
“@web3auth/base”: “^5.0.1”,
“@web3auth/no-modal”: “^5.0.1”,
“@web3auth/openlogin-adapter”: “^5.0.1”, - Platform:
macOS 13.2.1
Node 18.12.1
Vue ^3.2.38
Vite ^4.1.1 - Browser Console Screenshots:
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';// Configuring Vite | Vite
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,
},
},
});