I have a simple Next.js app. I am not using any server side options. It works well on Safari, Chrome, Firefox and it s already running on Vercel without any issue.
Today i tried it with Brave browser (the live link works without a problem) and i am getting this error on localhost:3000
I am only using Metamask - Firefox Relay and 1Password extensions with Brave.
Error: Hydration failed because the initial UI does not match what was rendered on the server.
I tried to comment out some of the functions and components to catch the issues but, nope..
Error log;
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 will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.
Seems like your component has problem.
You may just add this code beginning of that component, if it fixes, then you find the problem and try to fix what causing that.
const [mounted, setMounted] = useState(false);
useEffect(() => setMounted(true), []); if (!mounted) return null;