Users who use LastPass can't use Next.JS app router pages with password fields

[liam-russell]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: linux
      Arch: x64
      Version: #23-Ubuntu SMP PREEMPT_DYNAMIC Wed May 17 16:55:20 UTC 2023
    Binaries:
      Node: 19.9.0
      npm: 9.6.7
      Yarn: N/A
      pnpm: N/A
    Relevant Packages:
      next: 13.4.8-canary.2
      eslint-config-next: 13.4.5
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.1.3
    Next.js Config:
      output: N/A

Which area(s) of Next.js are affected? (leave empty if unsure)

App directory (appDir: true)

Link to the code that reproduces this issue or a replay of the bug

https://codesandbox.io/p/sandbox/modest-jang-tv3w5v?file=%2Fapp%2Fpage.tsx%3A1%2C1

To Reproduce

1. Ensure the LastPass extension is installed and logged in on your browser
2. Open repro https://codesandbox.io/p/sandbox/modest-jang-tv3w5v?file=%2Fapp%2Fpage.tsx%3A1%2C1
3. Visit the preview, eg: https://tv3w5v-3000.csb.app/
4. Observe browser console error due to hydration

Describe the Bug

Users with LastPass installed on the browser get a hydration error on pages which LastPass autofills:

Expected Behavior

The page should hydrate properly without causing errors and a page failure.

This issue has been discussed on the GitHub but the only suggested resolution has been to disable LastPass on the form, which is pretty unsustainable given how many users would expect LastPass to work on NextJS sites. I don't think the issue is on LastPass's end either as I think it's fair to assume on their end that manipulating the DOM trivially is OK.

There are also reports of similar but less dire issues with Grammarly and Loom, which are also very popular browser extensions.

The conclusion to draw, I think, is that Next.JS needs to be more flexible/tolerant of DOM manipulation and attempt to handle it. Especially when it's this trivial of a manipulation. Users won't understand why the site is broken and developers are going to be coming across this issue very frequently.

Which browser are you using? (if relevant)

Irrelevant but Google Chrome 114.0.5735.133

How are you deploying your application? (if relevant)

This occurs in local development

[shuding]

Does the same issue occur under the pages/ directory? It looks like that LastPass modifies the DOM which causes React to fail to hydrate.

[liam-russell]

No, it only happens in the app router. Here's a repro for pages/:
https://codesandbox.io/p/sandbox/github/vercel/next.js/tree/canary/examples/reproduction-template
https://dv2vtp-3000.csb.app/

[raphaelbadia]

The same thing happens to me since we've switched to the appdir, it's not that the users can't use the app, but it indeed triggers warnings all over the place.

[icyJoseph]

I think this does happen in pages dir, but not always...

For the app dir example, if we run a performance trace with Chrome Dev Tools, we see a couple of functions calls by Lastpass that happen between HTML download and the hydration phase.

The lp or LP prefixed functions are from LastPass - I guess

In App dir example:

For pages dir, it does happen, but not as often.

• Here it doesn't happen:

• Here it happened:

[liam-russell]

Interesting, I guess it's a race condition between LastPass and the next hydrator, if LastPass runs first then we get the error, if it runs second we don't.

[pc-erin]

This is definitely a framework-level problem. There shouldn't be an issue where a site/app bugs out because an extension made an otherwise innocuous change to the DOM. We know extensions/userscripts/browsers sometimes make changes to pages in the background. If a framework can't handle that it's not production-ready.

[adrianogf]

Basically Laspass tries to inject code into the DOM in username and password fields. I "solved" the problem by putting my login form in a non-SSR component.
<NonSSRWrapper> <LoginFormNoSSR /> </NonSSRWrapper>

See example at https://blog.bitsrc.io/using-non-ssr-friendly-components-with-next-js-916f38e8992c

[shuding]

Unfortunately hydration errors like this are triggered inside React, not Next.js (@pc-erin). This becomes more noticeable in the App Router because it uses React 18+ with strict mode always enabled:

Stricter hydration errors: Hydration mismatches due to missing or extra text content are now treated like errors instead of warnings.
https://react.dev/blog/2022/03/08/react-18-upgrade-guide#other-breaking-changes

So if an extension tries to modify the DOM structure, it might cause that problem.

The workaround is to add the suppressHydrationWarning={true} prop to the elements touched by LastPass: https://react.dev/reference/react-dom/hydrate#suppressing-unavoidable-hydration-mismatch-errors. Note that it doesn't apply to all child nodes, so you'll probably have to add it to all username/password inputs.

This problem is being tracked in React's repo: facebook/react#24430 (someone mentioned the LastPass issue as well). I'll close this one in Next.js.

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.