Next.js应用在Brave浏览器localhost环境出现Hydration错误求助

问题概述 #

我有一个未启用任何服务端选项的简单Next.js应用，在Safari、Chrome、Firefox浏览器及Vercel线上环境运行均正常，但在Brave浏览器的localhost:3000环境测试时出现水化错误（线上链接可正常访问）。仅在Brave中安装了Metamask - Firefox Relay和1Password扩展，尝试注释部分函数与组件排查但未找到原因。

错误提示 #

Hydration failed because the initial UI does not match what was rendered on the server.

错误日志 #

Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
at removeChild (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:11099:18)
at commitDeletionEffectsOnFiber (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:24023:15)
at recursivelyTraverseDeletionEffects (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:23984:5)
at commitDeletionEffectsOnFiber (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:24113:9)
...（省略重复调用栈）
next-dev.js?3515:20 The above error occurred in the component:
<pre><code>at Input2 (webpack-internal:///./node_modules/@chakra-ui/input/dist/chunk-GYFRIY2Z.mjs:15:11)
at div
at eval (webpack-internal:///./node_modules/@emotion/react/dist/emotion-element-6a883da9.browser.esm.js:57:66)
...（省略中间组件栈）
at Root (webpack-internal:///./node_modules/next/dist/client/index.js:346:11)
</code></pre>
React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.

排查与解决步骤 #

1. 排除浏览器扩展干扰 #

• 直接禁用所有Brave扩展（重点测试Metamask - Firefox Relay和1Password），重启浏览器后重新访问localhost:3000。这类扩展可能会自动修改页面DOM结构，导致服务端渲染的UI和客户端水化时的DOM不匹配。
• 如果禁用后恢复正常，逐个启用扩展，定位到具体引发问题的扩展，尝试更新扩展版本或调整其权限设置。

2. 修复Chakra UI组件的水化差异 #

错误栈明确指向Chakra UI的Input2组件，可尝试以下方案：

• 临时添加suppressHydrationWarning属性屏蔽警告（仅作临时调试用）：

<Input suppressHydrationWarning />

• 改用客户端渲染该组件，通过Next.js的dynamic导入并关闭SSR：

import dynamic from 'next/dynamic';
const Input = dynamic(() => import('@chakra-ui/input').then(mod => mod.Input), { ssr: false });

3. 调整Brave隐私防护设置 #

Brave默认的Shields防护可能会动态修改页面资源或DOM，尝试：

• 点击地址栏右侧的Shields图标，将Enhanced Tracking Protection切换为Standard等级，重新加载页面测试。

4. 清理本地缓存与重启服务 #

• 清理Brave浏览器缓存（快捷键Ctrl+Shift+Delete），关闭所有浏览器窗口后重新打开。
• 停止Next.js开发服务，删除本地缓存文件后重启：

rm -rf .next node_modules/.cache
npm install
npm run dev

5. 检查客户端特有代码 #

确保没有在服务端渲染阶段调用仅浏览器可用的API（如window、document），这类代码需要用useEffect或环境判断包裹：

import { useEffect } from 'react';

useEffect(() => {
  // 仅客户端执行的逻辑，如操作DOM、访问window对象
}, []);

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