已安装MetaMask扩展，Rainbow Kit却仅显示二维码问题

我在React应用中集成了Rainbow Kit，遇到如下问题：即使已安装MetaMask浏览器扩展，点击连接钱包时仍仅显示二维码和MetaMask安装选项，而非正常唤起MetaMask连接弹窗。该代码在之前的项目中可正常运行，以下是我的Rainbow Kit配置代码及package.json信息：

Rainbow Kit配置代码 #

import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter } from 'react-router-dom';
import "./index.css";
import App from "./App";
import Head from "./components/layout/head";
import Headline from "./components/layout/headline";
import { StateContextProvider } from "./context";
import reportWebVitals from "./reportWebVitals";
import '@rainbow-me/rainbowkit/styles.css';
import { darkTheme } from "@rainbow-me/rainbowkit";
import {
  getDefaultWallets,
  RainbowKitProvider,
} from '@rainbow-me/rainbowkit';
import { configureChains, createConfig, WagmiConfig } from 'wagmi';
import {
  mainnet,
  polygon,
  optimism,
  arbitrum,
  zora,
  bscTestnet,
} from 'wagmi/chains';
import { alchemyProvider } from 'wagmi/providers/alchemy';
import { publicProvider } from 'wagmi/providers/public';
import Slidebar from "./components/slidebar/Slidebar";
import Endline from "./components/endline/endline";

const { chains, publicClient } = configureChains(
  [mainnet, polygon, optimism, arbitrum, zora],
  [
    alchemyProvider({ apiKey: 'y5GcR0NBerm6Zg38XyTQxyO9FMw_TY4I' }),
    publicProvider()
  ]
);

const { connectors } = getDefaultWallets({
  appName: 'magicbag',
  projectId: 'f12c6b58850adba8695a7dd824637355',
  chains
});

const wagmiConfig = createConfig({
  autoConnect: true,
  connectors,
  publicClient
})
const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(
  <BrowserRouter>
    <WagmiConfig config={wagmiConfig} >
      <RainbowKitProvider coolMode modalSize="compact" chains={chains} theme={darkTheme()}  >
        <StateContextProvider>
          <Head />
          <Headline />
          <div className="flex justify-between items-center px-0 sm:px-10  mx-auto max-w-[1440px] h-[calc(100vh - 215px)] ">
            <Slidebar />
            <App />
          </div>
          <div className="  mx-auto max-w-[1440px]" >
            <Endline /></div>
        </StateContextProvider>
      </RainbowKitProvider>
    </WagmiConfig>
  </BrowserRouter>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint.
reportWebVitals();

package.json 内容 #

{
  "name": "magicbag",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
    "@material-tailwind/react": "^2.0.6",
    "@rainbow-me/rainbowkit": "^1.0.11",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "bignumber.js": "^4.0.4",
    "crypto-browserify": "^3.12.0",
    "ethers": "^5.7.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-fast-marquee": "^1.6.0",
    "react-icons": "^4.10.1",
    "react-router-dom": "^6.14.2",
    "react-scripts": "5.0.1",
    "react-spinners": "^0.13.8",
    "react-toastify": "^9.1.3",
    "react-transition-group": "^4.4.5",
    "stream-browserify": "^3.0.0",
    "viem": "^1.10.14",
    "wagmi": "^1.4.2",
    "web-vitals": "^2.1.4",
    "web3": "^4.1.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "tailwindcss": "^3.3.3"
  }
}

内容的提问来源于stack exchange，提问作者Zain Sahi