Next.js接入Metamask出现Element type is invalid错误无法定位原因

错误根因 #

你触发报错的核心原因是默认导出和命名导入语法混用，具体如下：
ConnectMetamaskButton.jsx 采用的是export default默认导出规则，但是你在ConnectWallet.jsx中使用了命名导入的语法（带大括号）导入该组件，导致实际导入的组件值为undefined，和报错提示完全匹配。

修复步骤 #

1. 修正ConnectWallet.jsx的导入语句，移除导入时的大括号：

// 修改前
import {ConnectMetamaskButton} from '../components/ConnectMetamaskButton';
// 修改后
import ConnectMetamaskButton from '../components/ConnectMetamaskButton';

2. 修正Accounts状态逻辑，避免按钮显示异常：
   你初始给Accounts赋值为字符串"connect"，连接成功后传入的是对象{accounts: 地址数组}，直接渲染会显示[object Object]，修改setAccounts逻辑直接存当前钱包地址即可：

// 修改前
setAccounts({ accounts });
// 修改后
setAccounts(accounts[0]);

3. 适配Next.js SSR环境：
   Next.js服务端渲染阶段没有window.ethereum对象，直接调用会触发服务端报错，在ConnectMetamask函数开头加环境判断：

async function ConnectMetamask() {
  if (typeof window === 'undefined' || !window.ethereum) {
    alert('请安装Metamask插件后重试');
    return;
  }
  // 原有逻辑
}

修改完成后重启yarn dev即可正常运行。

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