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

OnlyC · 2022-12-19T16:34:33Z

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 · 2022-12-21T07:07:45Z

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

designbyadrian · 2023-02-02T17:51:58Z

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

There is no fix mentioned in the link.

pixeleate · 2023-02-07T16:12:45Z

@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 · 2023-04-25T19:59:28Z

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 · 2023-06-01T12:04:19Z

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 · 2023-10-10T08:55:00Z

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 · 2023-11-06T18:51:34Z

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

Guteres007 · 2024-02-06T21:41:27Z

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

Yes, work for me in V2

deadcoder0904 · 2024-03-17T13:31:25Z

@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 · 2024-03-17T14:10:38Z

@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 · 2024-03-18T04:17:09Z

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 · 2024-04-02T22:14:07Z

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

deadcoder0904 · 2024-04-03T07:04:32Z

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

fzn0x · 2024-04-10T04:24:47Z

@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 · 2024-06-07T08:39:24Z

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 · 2024-06-16T12:07:28Z

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: Prop dangerouslySetInnerHTML did 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 · 2024-06-20T17:21:14Z

Removing Dark Mode v0.5.1 Chrome extension solved the issue

OnlyC closed this as completed Dec 21, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

OnlyC commented Dec 19, 2022

OnlyC commented Dec 21, 2022

designbyadrian commented Feb 2, 2023

pixeleate commented Feb 7, 2023

danielbyun commented Apr 25, 2023 •

edited

Loading

bokaroto commented Jun 1, 2023

YuraGB commented Oct 10, 2023

mahmoudmoravej commented Nov 6, 2023

Guteres007 commented Feb 6, 2024

deadcoder0904 commented Mar 17, 2024

designbyadrian commented Mar 17, 2024

deadcoder0904 commented Mar 18, 2024

Disorrder commented Apr 2, 2024

deadcoder0904 commented Apr 3, 2024

fzn0x commented Apr 10, 2024

designbyadrian commented Jun 7, 2024 •

edited

Loading

ivo-kalendar commented Jun 16, 2024

ARBS23 commented Jun 20, 2024

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

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

Comments

OnlyC commented Dec 19, 2022

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

Steps to Reproduce

Expected Behavior

Actual Behavior

OnlyC commented Dec 21, 2022

designbyadrian commented Feb 2, 2023

pixeleate commented Feb 7, 2023

danielbyun commented Apr 25, 2023 • edited Loading

bokaroto commented Jun 1, 2023

YuraGB commented Oct 10, 2023

mahmoudmoravej commented Nov 6, 2023

Guteres007 commented Feb 6, 2024

deadcoder0904 commented Mar 17, 2024

designbyadrian commented Mar 17, 2024

deadcoder0904 commented Mar 18, 2024

Disorrder commented Apr 2, 2024

deadcoder0904 commented Apr 3, 2024

fzn0x commented Apr 10, 2024

designbyadrian commented Jun 7, 2024 • edited Loading

ivo-kalendar commented Jun 16, 2024

ARBS23 commented Jun 20, 2024

danielbyun commented Apr 25, 2023 •

edited

Loading

designbyadrian commented Jun 7, 2024 •

edited

Loading