Skip to content

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

@liam-russell

Description

@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:
Pasted image

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugIssue was opened via the bug report template.locked

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions