-
Notifications
You must be signed in to change notification settings - Fork 30.7k
Description
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/AWhich 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
- Ensure the LastPass extension is installed and logged in on your browser
- Open repro https://codesandbox.io/p/sandbox/modest-jang-tv3w5v?file=%2Fapp%2Fpage.tsx%3A1%2C1
- Visit the preview, eg: https://tv3w5v-3000.csb.app/
- 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