search

mozilla / fx-private-relay-add-on

Companion add-on for Firefox Relay. Keep your email safe from hackers and trackers. Make an email alias with one click, and keep your address to yourself.
https://addons.mozilla.org/en-US/firefox/addon/private-relay
Mozilla Public License 2.0
67 stars 14 forks source link

Add-on results in error during SSR development #514

Open jeremy-code opened 1 year ago

jeremy-code commented 1 year ago

Hi, this issue isn't urgent, but I figured I might as well document it because it took some time for me to discover.

When running the development server for Next.js, and I suspect for other server-side rendered frameworks, I receive the error: 

Error: Hydration failed because the initial UI does not match what was rendered on the server.

Warning: Expected server HTML to contain a matching <input> in <div>.

The reasoning behind this error is because the client UI attempts to load in the Firefox Relay icon when using the Firefox Relay add-on, which conflicts with the server, resulting in a hydration error.

Vinnl commented 1 year ago

Yep, we've actually run into this ourselves as well. The easiest improvement to make would probably be to just not inject the icon on localhost at least. PRs welcome!

pandashashwat97 commented 11 months ago

Hi Jeremy can you assign this issue to me, if its still open!!

Vinnl commented 11 months ago

@pandashashwat97 It's still open, feel free to submit a PR. This is probably where to start looking; I'm guessing adding localhost to that list would resolve it, maybe including looking at the hostname instead of the origin.