Expected server HTML to contain a matching <head> in <html>

OnlyC commented 1 year ago

Have you experienced this bug with the latest version of the template?

yes

Steps to Reproduce

npx create-remix@latest --template remix-run/indie-stack
npm run dev

Expected Behavior

No errors

Actual Behavior

OnlyC commented 1 year ago

Found the fix: https://remix.run/docs/en/v1/pages/gotchas#browser-extensions-injecting-code

designbyadrian commented 1 year ago

Found the fix: https://remix.run/docs/en/v1/pages/gotchas#browser-extensions-injecting-code

There is no fix mentioned in the link.

pixeleate commented 1 year ago

@designbyadrian the fix is to open the app in incognito mode, yes I know, I think the same this is not a fix, but it's what they suggested.

danielbyun commented 1 year ago

Ran into issue today and found the plugin that was causing this issue. Removed and is now working fine.

The fix is as @OnlyC 's url provided.

bokaroto commented 1 year ago

hydration fails due to extensions that you have in your browser, it has nothing to do with the remix, it's a problem in React. Because they inject extensions into pages , insert their own code, and then when rendering to the server and then to the client It's different and that's why it throws errors. Ignore it or use the incognito tab.

YuraGB commented 11 months ago

hydration fails due to extensions that you have in your browser, it has nothing to do with the remix, it's a problem in React. Because they inject extensions into pages , insert their own code, and then when rendering to the server and then to the client It's different and that's why it throws errors. Ignore it or use the incognito tab.

You are right

mahmoudmoravej commented 10 months ago

Mine was becuase of "Apollo Client Dev tools" extension. Disabling it solved as suggessted.

Guteres007 commented 7 months ago

Mine was becuase of "Apollo Client Dev tools" extension. Disabling it solved as suggessted.

Yes, work for me in V2

deadcoder0904 commented 5 months ago

@designbyadrian the fix is to open the app in incognito mode, yes I know, I think the same this is not a fix, but it's what they suggested.

solved it for me :)

designbyadrian commented 5 months ago

@designbyadrian the fix is to open the app in incognito mode, yes I know, I think the same this is not a fix, but it's what they suggested.

solved it for me :)

It won't solve it for every visitor to your website.

deadcoder0904 commented 5 months ago

It won't solve it for every visitor to your website.

well, only developers like to open the console.

and there are many high-profile production websites that have consoles filled with red-wedding :)

Disorrder commented 5 months ago

Fixed by restricting allowed sites list for my specific extension not related to react

deadcoder0904 commented 5 months ago

@Disorrder how did you do that? i tried googling for hacks like that but nothing worked lol.

fzn0x commented 5 months ago

@deadcoder0904 I think modify the manifest.json

or use this code for manifest 2

chrome.browserAction.onClicked.addListener(function(tab) {
    if(!tab.url || !tab.url.startsWith('http')){
        return;
    }

    // do stuff
});

designbyadrian commented 3 months ago

It won't solve it for every visitor to your website.

well, only developers like to open the console.

and there are many high-profile production websites that have consoles filled with red-wedding :)

The problem is that this error can cause blocked renders, leading to empty pages or missing styles. It's not simply the issue of text inside the console. You can't force users to disable extensions or view in incognito mode.

The real solution is to use a certain version of React that has a fix. Apparently, version 19 rc has it. Previously, it was the canary version of 18.3.0: 18.3.0-canary-a870b2d54-20240314

Set the exact version and overrides in package.json

"dependencies": {
    "react": "18.3.0-canary-a870b2d54-20240314",
    "react-dom": "18.3.0-canary-a870b2d54-20240314",
  ...
},
"overrides": {
    "react": "18.3.0-canary-a870b2d54-20240314",
    "react-dom": "18.3.0-canary-a870b2d54-20240314"
  },
}

ivo-kalendar commented 2 months ago

It won't solve it for every visitor to your website.

well, only developers like to open the console. and there are many high-profile production websites that have consoles filled with red-wedding :)

The problem is that this error can cause blocked renders, leading to empty pages or missing styles. It's not simply the issue of text inside the console. You can't force users to disable extensions or view in incognito mode.

The real solution is to use a certain version of React that has a fix. Apparently, version 19 rc has it. Previously, it was the canary version of 18.3.0: 18.3.0-canary-a870b2d54-20240314

Set the exact version and overrides in package.json
"dependencies": {
    "react": "18.3.0-canary-a870b2d54-20240314",
    "react-dom": "18.3.0-canary-a870b2d54-20240314",
  ...
},
"overrides": {
    "react": "18.3.0-canary-a870b2d54-20240314",
    "react-dom": "18.3.0-canary-a870b2d54-20240314"
  },
}

@designbyadrian this works fine. I don't see the usual error and the production console is clean, but now i have another error only in development: Warning: PropdangerouslySetInnerHTMLdid not match. Server: "" Client: "\n/* /app/tailwind.css */\n/*\n! tailwindcss v3.4.4 | MIT License | https://tailwindcss.com\n*//*\n1. Prevent padding and border from affecting element width..... I'm using the latest: npx create-remix@latest --template remix-run/remix/templates/express

ARBS23 commented 2 months ago

Removing Dark Mode v0.5.1 Chrome extension solved the issue

remix-run / indie-stack