Next.js应用程序适用于Safari,Chrome和Firefox,但在Brave浏览器上给予水合错误

n3schb8v  于 2023-05-17  发布在  其他
关注(0)|答案(1)|浏览(153)

我有一个简单的Next.js应用程序。我没有使用任何服务器端选项。它在Safari,Chrome,Firefox上运行良好,并且已经在Vercel上运行,没有任何问题。
今天我尝试了勇敢的浏览器(活链接工程没有问题),我得到这个错误localhost:3000
我只使用Metamask - Firefox中继和1Password扩展与勇敢。
错误:由于初始UI与在服务器上呈现的UI不匹配,水合失败。
我试图注解掉一些函数和组件来抓住问题,但是没有。
错误日志;

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) 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) 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) at commitDeletionEffects (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:23971:5) at recursivelyTraverseMutationEffects (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:24254:9) at commitMutationEffectsOnFiber (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:24341:9) at recursivelyTraverseMutationEffects (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:24268:7) at commitMutationEffectsOnFiber (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:24288:9) at recursivelyTraverseMutationEffects (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:24268:7) at commitMutationEffectsOnFiber (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:24288:9) at recursivelyTraverseMutationEffects (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:24268:7) at commitMutationEffectsOnFiber (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:24341:9) at recursivelyTraverseMutationEffects (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:24268:7) at commitMutationEffectsOnFiber (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:24288:9) at recursivelyTraverseMutationEffects (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:24268:7) at commitMutationEffectsOnFiber (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:24288:9) at recursivelyTraverseMutationEffects (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:24268:7) at commitMutationEffectsOnFiber (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:24288:9) at recursivelyTraverseMutationEffects (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:24268:7) at commitMutationEffectsOnFiber (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:24288:9) at recursivelyTraverseMutationEffects (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:24268:7) at commitMutationEffectsOnFiber (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:24341:9) at recursivelyTraverseMutationEffects (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:24268:7) at commitMutationEffectsOnFiber (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:24288:9) at recursivelyTraverseMutationEffects (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:24268:7) at commitMutationEffectsOnFiber (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:24288:9) at recursivelyTraverseMutationEffects (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:24268:7) at commitMutationEffectsOnFiber (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:24288:9) at recursivelyTraverseMutationEffects (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:24268:7) at commitMutationEffectsOnFiber (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:24288:9) at recursivelyTraverseMutationEffects (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:24268:7) at commitMutationEffectsOnFiber (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:24571:9) at recursivelyTraverseMutationEffects (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:24268:7) at commitMutationEffectsOnFiber (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:24341:9) at recursivelyTraverseMutationEffects (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:24268:7) at commitMutationEffectsOnFiber (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:24288:9) at recursivelyTraverseMutationEffects (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:24268:7) at commitMutationEffectsOnFiber (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:24288:9) at recursivelyTraverseMutationEffects (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:24268:7) at commitMutationEffectsOnFiber (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:24288:9) at recursivelyTraverseMutationEffects (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:24268:7) at commitMutationEffectsOnFiber (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:24341:9) at recursivelyTraverseMutationEffects (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:24268:7) at commitMutationEffectsOnFiber (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:24288:9) at recursivelyTraverseMutationEffects (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:24268:7) next-dev.js?3515:20 The above error occurred in the component:

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 commitMutationEffectsOnFiber (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:24341:9)
at div
at eval (webpack-internal:///./node_modules/@emotion/react/dist/emotion-element-6a883da9.browser.esm.js:57:66)
at commitMutationEffectsOnFiber (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:24341:9)
at eval (webpack-internal:///./node_modules/@chakra-ui/layout/dist/chunk-O5CRURSQ.mjs:23:5)
at VStack
at div
at eval (webpack-internal:///./node_modules/@emotion/react/dist/emotion-element-6a883da9.browser.esm.js:57:66)
at commitMutationEffectsOnFiber (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:24341:9)
at CardBody2 (webpack-internal:///./node_modules/@chakra-ui/card/dist/chunk-KKEJMMX3.mjs:16:11)
at commitMutationEffectsOnFiber (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:24341:9)
at div
at eval (webpack-internal:///./node_modules/@emotion/react/dist/emotion-element-6a883da9.browser.esm.js:57:66)
at commitMutationEffectsOnFiber (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:24341:9)
at Card2 (webpack-internal:///./node_modules/@chakra-ui/card/dist/chunk-S432VF2S.mjs:24:88)
at main
at commitMutationEffectsOnFiber (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:24341:9)
at SessionContextProvider (webpack-internal:///./node_modules/@supabase/auth-helpers-react/dist/index.js:42:3)
at QueryClientProvider (webpack-internal:///./node_modules/@tanstack/react-query/build/lib/QueryClientProvider.mjs:47:3)
at WagmiConfig (webpack-internal:///./node_modules/wagmi/dist/index.js:134:3)
at EnvironmentProvider (webpack-internal:///./node_modules/@chakra-ui/react-env/dist/chunk-23XYWYLU.mjs:32:11)
at ColorModeProvider (webpack-internal:///./node_modules/@chakra-ui/color-mode/dist/chunk-4DEUOPYU.mjs:28:5)
at ThemeProvider (webpack-internal:///./node_modules/@emotion/react/dist/emotion-element-6a883da9.browser.esm.js:96:64)
at ThemeProvider (webpack-internal:///./node_modules/@chakra-ui/system/dist/chunk-3ZTTLJBV.mjs:26:11)
at ChakraProvider (webpack-internal:///./node_modules/@chakra-ui/provider/dist/chunk-IC3K6TJB.mjs:18:5)
at ChakraProvider2 (webpack-internal:///./node_modules/@chakra-ui/react/dist/chunk-DGNA6VRZ.mjs:17:5)
at App (webpack-internal:///./pages/_app.tsx:42:11)
at PathnameContextProviderAdapter (webpack-internal:///./node_modules/next/dist/shared/lib/router/adapters.js:62:11)
at commitMutationEffectsOnFiber (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:24341:9)
at ReactDevOverlay (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:850:919)
at commitMutationEffectsOnFiber (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:24341:9)
at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:171:11)
at Root (webpack-internal:///./node_modules/next/dist/client/index.js:346:11)

React将尝试使用您提供的错误边界ErrorBoundary从头开始重新创建此组件树。

hxzsmxv2

hxzsmxv21#

看起来你的组件有问题。
你可以在组件的开头添加这段代码,如果它修复了,那么你就找到了问题,并尝试修复导致问题的原因。

const [mounted, setMounted] = useState(false);
useEffect(() => setMounted(true), []); if (!mounted) return null;

相关问题