Add-on results in error during SSR development

[jeremy-code]

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]

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]

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

[Vinnl]

@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.

[thelittleerik]

Ran into the same issue. Will this have any effect in the production build for users with Firefox Relay extension?
Can I continue development without worrying about this issue?