Hydration Error caused by chrome extension.

[AlexanderHott]

Link to the code that reproduces this issue

https://github.com/AlexanderHott/nextjs-15-chrome-extension-hydration

To Reproduce

1. Install LanguageTool or any extension that adds data properties to the browser
2. bun i
3. bun dev
4. Go to http://localhost:3000

Current vs. Expected behavior

Currently, there is a hydration error.

-data-lt-installed="true"
-data-extension-installed="2.4.0"

There shouldn't be a hydration error.

I tried "disabling" the extension, but it still leaves the data-lt-installed property.

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #47-Ubuntu SMP PREEMPT_DYNAMIC Fri Sep 27 21:40:26 UTC 2024
  Available memory (MB): 15291
  Available CPU cores: 16
Binaries:
  Node: 21.4.0
  npm: 10.2.5
  Yarn: 1.22.22
  pnpm: 9.12.2
Relevant Packages:
  next: 15.0.0 // Latest available version is detected (15.0.0).
  eslint-config-next: 15.0.0
  react: 19.0.0-rc-65a56d0e-20241020
  react-dom: 19.0.0-rc-65a56d0e-20241020
  typescript: 5.6.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

create-next-app

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

No response

[AlexanderHott]

Forgot to mention, this is on a clean create next app with all the defaults.

[samcx]

@AlexanderHott Moving this to discussions since this is expected with certain Chrome extensions.

Unfortunately we can't do anything about this when it comes from a Chrome extension.

I tried "disabling" the extension, but it still leaves the data-lt-installed property.

I would expect the extension to completely remove itself when disabled 🤔

[AlexanderHott]

There's a "disable" toggle in the extension itself. A workaround I found that works is (right click extension) > "This can read and change site data" > Select "When you click the extension".

If there is a way to disable it running on localhost, that would be great, but I haven't found one yet.

[AlexanderHott]

This is a bit of a stretch, but maybe the react devtools chrome extension could add a feature to disable some extensions on localhost

[heijmerikx]

Try completely disabling the LanguageTool extention. This should solve this issue. (Checked, worked in my test.)

[codingstark-dev]

Getting this weird issue and i am using arc browser.

-form_signature="7810705838526794697"
-alternative_form_signature="15412069196495876970"
-field_signature="1318412689"
-form_signature="7810705838526794697"
-alternative_form_signature="15412069196495876970"
-visibility_annotation="true"
ConsoleError: A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up. This can happen if a SSR-ed Client Component used:

• A server/client branch if (typeof window !== 'undefined').
• Variable input such as Date.now() or Math.random() which changes each time it's called.
• Date formatting in a user's locale which doesn't match the server.
• External changing data without sending a snapshot of it along with the HTML.
• Invalid HTML tag nesting.

It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.

https://react.dev/link/hydration-mismatch

...
   <RedirectBoundary>
     <RedirectErrorBoundary router={{...}}>
       <InnerLayoutRouter parallelRouterKey="children" url="/" tree={[...]} childNodes={Map} segmentPath={[...]} ...>
         <ClientPageRoot Component={function Chat} searchParams={{}} params={{}}>
           <Chat params={Promise} searchParams={Promise}>
             <Suspense fallback="loading">
               <div className="flex justi...">
                 <div className="flex flex-...">
                   <MotionComponent animate={{minHeight:0, ...}} transition={{type:"spring", ...}} ...>
                     <div className="rounded-lg..." style={{}} ref={function}>
                       <div className="flex flex-...">
                         <form
                           onSubmit={function}
                           className="flex space-x-2"
-                           form_signature="7810705838526794697"
-                           alternative_form_signature="15412069196495876970"
                         >
                           <_c className="bg-neutral..." minLength={3} required={true} value="" ...>
                             <input
                               type={undefined}
                               className="flex h-10 rounded-md px-3 py-2 file:border-0 file:bg-transparent file:text-..."
                               ref={null}
                               minLength={3}
                               required={true}
                               value=""
                               placeholder="Ask me anything..."
                               onChange={function handleInputChange}
-                               field_signature="1318412689"
-                               form_signature="7810705838526794697"
-                               alternative_form_signature="15412069196495876970"
-                               visibility_annotation="true"
                             >
                         ...
         ...

   at handleClientError (http://localhost:3000/_next/static/chunks/node_modules_next_dist_client_e72844._.js:794:17)
   at window.console.error (http://localhost:3000/_next/static/chunks/node_modules_next_dist_client_e72844._.js:907:56)
   at emitPendingHydrationWarnings (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:2762:103)
   at completeWork (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:7367:32)
   at runWithFiberInDEV (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:631:20)
   at completeUnitOfWork (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:7990:23)
   at performUnitOfWork (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:7932:28)
   at workLoopConcurrent (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:7926:58)
   at renderRootConcurrent (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:7908:71)
   at performWorkOnRoot (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:7547:139)
   at performWorkOnRootViaSchedulerTask (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:8379:9)
   at MessagePort.performWorkUntilDeadline (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_107ce8._.js:2352:64)