Fresh Remix project comes with errors out the box

[MrSiby]

What version of Remix are you using?

1.7.5 - 1.7.6

Steps to Reproduce

PNPM

pnpx create-remix@latest
# use default options (Remix app server, typescript etc)
cd my-remix-app/
pnpm run dev

NPM

npx create-remix@latest
# use default options (Remix app server, typescript etc)
cd my-remix-app/
npm run dev

Expected Behavior

I expect a fresh install to work without error.

Actual Behavior

Console errors when running the website

Warning: Expected server HTML to contain a matching

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

Warning: An error occurred during hydration. The server HTML was replaced with client content in <#document>.

Uncaught Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.

[MichaelDeBoey]

This is probably because one of your browser extensions is injecting code : https://remix.run/pages/gotchas#browser-extensions-injecting-code

[MrSiby]

I did have this issue once because of the Google Analytics Opt-out extension, however, this time the error was present with all extensions disabled as well as in incognito.

I did manage to get rid of it by modifying the dev script like so

  "scripts": {
    "dev": "NODE_ENV=development remix dev",
  },

[MichaelDeBoey]

We removed the NODE_ENV=development with a reason, but I don't know why anymore 🤔 @chaance can probably give more insights here

[jdnichollsc]

NODE_ENV=development r

I tried this but I'm getting the error "The connection was reset" from Firefox and the page is not loaded correctly :thinking:

[Asjas]

My issue was caused by Apollo Developer Tools, removing it from Firefox stopped this error.

[chaance]

This is definitely a problem with React hydration and extensions/third-party code injecting code that creates a mismatch. I ran a fresh install and couldn't reproduce the console errors in any browser, so I'm going to close this one.