[Bug]: App crash on fast browser navigation #1757
Comments
ghost
added
the
|
#1618 might be related to this |
|
This seems to be caused by a race condition in the Remix code. As far as I understand, the The If you're doing the browser navigation slowly, everything works as expected: I'm not sure how to fix this, the code that is involved is quite... complicated and I've not yet been able to completely understand it. |
|
After further experimentation, it is quite clear that React Router immediately wants to render This can easily be seen by adding a Update Actually, it's the browser that skips the first page. This can be seen by adding a So it seems that the app can be reached via "server-side" navigation where the Remix code expected it to be reachable via client-side navigation only. In other words: The SSR state is invalid for the route that is supposed to be shown by the client-side code and the code that is supposed to update the SSR state doesn't get executed. So that would mean that before hydration, Remix should check whether it needs to update the SSR state, e.g., downloading additional JavaScript and updating the @ryanflorence, @kentcdodds Any thoughts on what would be a good strategy to tackle this issue? |
|
I just faced the same issue. |
|
A similar error occurred when I stupidly rendered import {
Links,
LiveReload,
Meta,
Outlet,
Scripts,
ScrollRestoration,
} from "@remix-run/react";
export default function App() {
return (
<html>
<head>
<Meta />
<Links />
</head>
<body>
<Outlet />
<ScrollRestoration />
<Scripts />
<LiveReload />
<Scripts /> {/* Duplicate! */}
</body>
</html>
);
}components:js: The error occurs only on |
|
I'm also getting a |
|
@f1ow thank you so much, i had the same issue, and also rendered Scripts twice! |
|
I encountered same issue today with latest |
|
Same. The error appears on the first hydration with a quick navigation to another page (in my case, a nested one). |
|
any update on this? |
|
I'm running into this as well. A trivial repro is:
hypothesis:
hypothetical fix:
|
|
Running into the same issue caused by fast navigation between pages |
|
Any ideas? I don't have a duplicate <Script /> or another other top level tag. Occurred when I was showing off remix to my boss 😅 |
|
Crafted a PR that demonstrates a repro case for this issue: #5166 cc/ @jacob-ebey |
|
I think I'm gonna call this the goldilocks bug. It's not just an issue of clicking too fast, or too slow. It seems to happen if you click forward, then wait just the right amount of time for the modules to start loading for I could never reproduce it normally, but once I turned on network throttling and waited long enough to see the I believe this is what's happening:
A few off-the-cuff options:
I prefer 1 :) |
|
@brophdawg11 any chance there is an update on this? We're still running into the issue which causes the app to arbitrarily crash:
|
… route This can happen when entry.client.ts isn't fully loaded before a route change occurs. See remix-run#1757 for more info.
|
Added a PR with suggested fix here: #6409 |
|
Having issues with this as well. Commenting to track |
brophdawg11
added
the
awaiting release
|
This is fixed by #6409 and should be available once the next release goes out (should be |
|
🤖 Hello there, We just published version Thanks! |
|
🤖 Hello there, We just published version Thanks! |
|
🤖 Hello there, We just published version Thanks! |
|
🤖 Hello there, We just published version Thanks! |
brophdawg11
removed
the
awaiting release
|
I did some digging back into this today after we made the change in #9695 and reverted it because it caused some other regressions. I was going to try to dig in and see if there was a better fix than the URL check we are currently doing which has some false positives (#8872, #7529) and was having trouble reproducing it.
Reading through #1678 though I had forgotten that this looping was only an issue in React 17, and React 18 did not go into an hydration loop. That was the underlying reason we aimed to fix this - because the infinite loop React got into was problematic, not so much the fact that a hydration error occurred. Now that Remix v2 requires React 18, the looping issue is gone. So, it seems that at this point, the original looping issue from OP here is no longer a concern in Remix v2. And the fix we have in had some false positive edge cases that cause a loop of it's own. So our fix, applied to React 18, introduces a potential loop which is worse than the actual non-looping hydration error which is fixed by a reload. So I'm inclined to remove this URL check and, if desired, we can potentially look for a more appropriate fix as part of #7080. But honestly I think the hydration errors that may occur if we did remove this check are likely less of an issue than the current loops we get into from false-positives. |
|
FYI we just merged #9890 to remove the hydration check originally added in @jacob-ebey and I then spent a while reproducing the issue on various versions of Remix (back to 1.17.0) and React (17 and 18) and from what we can tell, current Remix When you SSR |
and others
What version of Remix are you using?
1.1.3
What version of Node are you using? Minimum supported version is 14.
16.0.0
Steps to Reproduce
npx create-remix@latest.yarn install.app/routes/index.tsx, addapp/routes/other.tsxwith a component that simply renders<>Other</>app/routes/index.tsx, add<Link to="/other">Other</Link>somewhere, withimport { Link } from "remix";.yarn devoryarn start; the error happens for both dev and prod builds.Other.Expected Behavior
The page content should be displayed without any errors.
Actual Behavior
In the simple repo above, the app crashes and there is the following stack trace in the dev console. In my real app in a production build, this issue then causes #1678, basically making the entire browser tab unresponsive.
The text was updated successfully, but these errors were encountered: