Can't get the modal to work in Sveltekit (ERR: ncaught Error: A React Element from an older version of React was rendered

Help - Plug n Play
1

I installed the libraries in Sveltekit, here is my main page:

<script lang="ts">
	import { onMount } from 'svelte';
	import * as Web3AuthModal from '@web3auth/modal';
	const { Web3Auth } = Web3AuthModal;
	import * as SolanaProvider from '@web3auth/solana-provider';
	const { SolanaPrivateKeyProvider } = SolanaProvider;

	let web3auth: Web3Auth = null;

	async function initializeWeb3Auth() {
		const Web3AuthBase = await import('@web3auth/base');
		const { CHAIN_NAMESPACES } = Web3AuthBase;
		const chainConfig = {
			chainNamespace: CHAIN_NAMESPACES.SOLANA,
			chainId: '0x3', // Please use 0x1 for Mainnet, 0x2 for Testnet, 0x3 for Devnet
			rpcTarget: 'https://api.devnet.solana.com',
			displayName: 'Solana Devnet',
			blockExplorerUrl: 'https://explorer.solana.com',
			ticker: 'SOL',
			tickerName: 'Solana',
			logo: 'https://images.toruswallet.io/solana.svg'
		};
		const privateKeyProvider = new SolanaPrivateKeyProvider({
			config: { chainConfig: chainConfig }
		});
		web3auth = new Web3Auth({
			// Get it from Web3Auth Dashboard
			clientId:
				'________________',
			web3AuthNetwork: 'sapphire_mainnet',
			privateKeyProvider: privateKeyProvider
		});
	}

	onMount(async () => {
		await initializeWeb3Auth().then(() => {
			if (web3auth) {
				web3auth.initModal();
			}
		});
	});
</script>

As soon as I init the modal, i get this:

Uncaught Error: A React Element from an older version of React was rendered. This is not supported. It can happen if:
- Multiple copies of the "react" package is used.
- A library pre-bundled an old copy of "react" or "react/jsx-runtime".
- A compiler tries to "inline" JSX instead of using the runtime.
    throwOnInvalidObjectType @web3auth_modal.js:23207
    reconcileChildFibersImpl @web3auth_modal.js:23966
    reconcileChildFibers2 @web3auth_modal.js:23989
    reconcileChildren @web3auth_modal.js:27591
    updateHostRoot @web3auth_modal.js:28089
    beginWork @web3auth_modal.js:29112
    performUnitOfWork @web3auth_modal.js:34724
    workLoopSync @web3auth_modal.js:34546
    renderRootSync @web3auth_modal.js:34520
    performConcurrentWorkOnRoot @web3auth_modal.js:34004
    workLoop @web3auth_modal.js:1167
    flushWork @web3auth_modal.js:1146
    performWorkUntilDeadline @web3auth_modal.js:1354
    js @web3auth_modal.js:1372
    js @web3auth_modal.js:1418
    __require2 chunk-K4HZOIO6.js:29
    js @web3auth_modal.js:1433
    __require2 chunk-K4HZOIO6.js:29
    js @web3auth_modal.js:15229
    js @web3auth_modal.js:41124
    __require2 chunk-K4HZOIO6.js:29
    js @web3auth_modal.js:41153
    __require2 chunk-K4HZOIO6.js:29
    <anonymous> @web3auth_modal.js:48753

here is my vite config:

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';
import { nodePolyfills } from 'vite-plugin-node-polyfills';

export default defineConfig({
	plugins: [
		nodePolyfills({
			exclude: ['fs'],
			globals: {
				Buffer: true,
				global: true,
				process: true
			},
			protocolImports: true
		}),
		sveltekit()
	],
	server: {
		host: '127.0.0.1',
		port: 5173,
		strictPort: true
	},
	optimizeDeps: {
		include: ['dayjs/plugin/relativeTime.js', 'dayjs', '@web3auth/solana-provider']
	}
});

Thank you!

2

Hey @bewinxed
I think is issue is occurring due to wrong imports within the code. Can you change the way of your imports?

import { CHAIN_NAMESPACES, IProvider, WEB3AUTH_NETWORK } from "@web3auth/base";
import { SolanaPrivateKeyProvider } from "@web3auth/solana-provider";
import { Web3Auth } from "@web3auth/modal";
3

Of course i tried to import this way first, But I get errors regarding that all these modules are CommonJS modules and cannot be imported normally.

4

All of our modules are ESM ones, I think there might be something in the config. Can you share that?

5

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