Unexpected error when trying to use injected connector in dev mode (Svelte)

[beeb]

Check existing issues

• I checked there isn't already an issue for the bug I encountered.

Describe the bug

I am trying to create an adapter to use wagmi with svelte 5, but encounter an "unexpected error" in the browser console with the injected connector:

Lengthy error trace

Error: Unexpected error
    Rr <anonymous code>:1
    request <anonymous code>:7
    selectExtension <anonymous code>:7
    request <anonymous code>:7
    connect injected.ts:122
    connect connect.ts:82
    _page +page.svelte:23
    _page +page.svelte:41
    update_reaction runtime.js:401
    update_effect runtime.js:527
    flush_queued_effects runtime.js:638
    flush_queued_root_effects runtime.js:617
    process_deferred runtime.js:669
    schedule_effect runtime.js:688
    mark_reactions sources.js:262
    internal_set sources.js:177
    set sources.js:159
    <anonymous> +page.svelte:51
    acceptExports client:46
    fetchUpdate client:218
    queueUpdate client:193
    queueUpdate client:193
    handleMessage client:638
    handleMessage client:636
    setupWebSocket client:546
    setupWebSocket client:545
    <anonymous> client:530
<anonymous code>:7:8980
    selectExtension <anonymous code>:7
    request <anonymous code>:7
    connect injected.ts:122
    connect connect.ts:82
    _page +page.svelte:23
    _page +page.svelte:41
    update_reaction runtime.js:401
    update_effect runtime.js:527
    flush_queued_effects runtime.js:638
    flush_queued_root_effects runtime.js:617
    process_deferred runtime.js:669
    (Async: VoidFunction)
    schedule_effect runtime.js:688
    mark_reactions sources.js:262
    internal_set sources.js:177
    set sources.js:159
    <anonymous> +page.svelte:51
    acceptExports client:46
    fetchUpdate client:218
    queueUpdate client:193
    queueUpdate client:193
    handleMessage client:638
    handleMessage client:636
    setupWebSocket client:546
    (Async: EventListener.handleEvent)
    setupWebSocket client:545
    <anonymous> client:530

Link to Minimal Reproducible Example

https://stackblitz.com/edit/sveltejs-kit-template-default-bdjexp37?file=src%2Froutes%2F%2Bpage.svelte

Steps To Reproduce

1. Use a browser that has metamask installed
2. Start a svelte project in dev mode and use the injected() connector
3. Observe an unknown error in the "injected" connector

What Wagmi package(s) are you using?

@wagmi/connectors, @wagmi/core

Wagmi Package(s) Version(s)

@wagmi/core@2.16.2, @wagmi/connectors@5.7.2

Viem Version

2.21.57

TypeScript Version

^5.0.0

Anything else?

Here's the +page.svelte file.

<script lang="ts">
  import { mainnet, sepolia } from "@wagmi/core/chains";
  import { injected } from "@wagmi/connectors";
  import {
    connect,
    getAccount,
    http,
    createConfig,
  } from "@wagmi/core";

  const config = $state(
    createConfig({
      chains: [mainnet, sepolia],
      transports: {
        [mainnet.id]: http(),
        [sepolia.id]: http(),
      },
    }),
  );
  const { address } = $derived(getAccount(config));

  $effect(() => {
    (async () => {
      await connect(config, { connector: injected() });
    })();
  });

</script>

<div>{address}</div>

[beeb]

I did some more testing and it seems the error only happens in svelte dev mode (with metamask). If I build the application and serve the preview, the metamask pop-up opens.