Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Extension breaks Remix.run React framework hydration #937

Closed
msakrejda opened this issue Nov 3, 2022 · 4 comments
Closed

Extension breaks Remix.run React framework hydration #937

msakrejda opened this issue Nov 3, 2022 · 4 comments

Comments

@msakrejda
Copy link

When using the default Remix.run starter app, with the extension enabled, React hydration breaks. May be related to #839, but opening a new issue, since it's a little different and the reporter closed that one.

Intended outcome:

Use a default Remix.run template app without errors.

Actual outcome:

In the console, I see the errors

Warning: Expected server HTML to contain a matching <head> in <html>.
head
html
App
RemixRoute@http://localhost:3000/build/_shared/chunk-RPSUDZQU.js:2531:20
Routes2@http://localhost:3000/build/_shared/chunk-RPSUDZQU.js:2515:7
Router@http://localhost:3000/build/_shared/chunk-RPSUDZQU.js:741:7
RemixCatchBoundary@http://localhost:3000/build/_shared/chunk-RPSUDZQU.js:1018:28
RemixErrorBoundary@http://localhost:3000/build/_shared/chunk-RPSUDZQU.js:944:5
RemixEntry@http://localhost:3000/build/_shared/chunk-RPSUDZQU.js:2408:20
RemixBrowser@http://localhost:3000/build/_shared/chunk-RPSUDZQU.js:3166:27 react_devtools_backend.js:4026:25

and

Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.
    React 12
    workLoop scheduler.development.js:266
    flushWork scheduler.development.js:239
    performWorkUntilDeadline scheduler.development.js:533
    js scheduler.development.js:571
    js scheduler.development.js:633
    __require chunk-IE366Y5W.js:8
    js index.js:6
    __require chunk-IE366Y5W.js:8
    React 2
    __require chunk-IE366Y5W.js:8
    js React
    __require chunk-IE366Y5W.js:8
    js React
    __require chunk-IE366Y5W.js:8
    <anonymous> entry.client.tsx:3
react-dom.development.js:12507:8

How to reproduce the issue:

npx create-remix@latest apollo-devtools-bug-repro
cd apollo-devtools-bug-repro
npm run dev

Then open the browser to http://localhost:3000/ and open the browser dev tools to see the error.

Desktop (please complete the following information):

  • OS: Ubuntu 20.04
  • Browser: Firefox 106.0.2
  • Extension version: 4.1.2
@mrm007 mrm007 mentioned this issue Dec 14, 2023
Closed
@phryneas phryneas mentioned this issue Dec 14, 2023
Merged
@alessbell
Copy link
Contributor

Hi @msakrejda, I can confirm this has been fixed in 4.3.0 via #1164.

The Chrome extension store is already distributing the newest version and FF should update within a day or two, once you update you should no longer see this happening. Thanks for reporting it!

@jerelmiller
Copy link
Member

Hey @msakrejda 👋

Unfortunately we discovered an issue with our latest release and had to roll it back. I'm reopening this issue once more until we are able to dig into the changes a bit more. So sorry for this!

@jerelmiller jerelmiller reopened this Dec 20, 2023
@jerelmiller jerelmiller mentioned this issue Feb 21, 2024
Merged
@jerelmiller
Copy link
Member

Hey @msakrejda, I was digging into this a bit more, but I believe the issue is actually over on the Remix side. I just installed a new app per your instructions in a fresh Firefox instance running no extensions and saw the same hydration mismatch that you reported above.

Screenshot 2024-02-20 at 9 41 18 PM

As you can see, I have no extensions installed/running:

Screenshot 2024-02-20 at 9 42 11 PM

As such, I'm going to go ahead and close this as I don't think there is anything we can do. Thanks!

@github-actions GitHub Actions
Copy link
Contributor

Do you have any feedback for the maintainers? Please tell us by taking a one-minute survey. Your responses will help us understand Apollo Client usage and allow us to serve you better.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@msakrejda @jerelmiller @alessbell