Endless hydration error loop with latest version of @remix-run/express

[ecrvich]

So I was at 2.9.1 of all Remix components. @remix-run/express depends on express, which was at 4.19.2. All was well. Some security vulnerabilities appeared in npm audit, all of which were dependent modules of express (send, body-parser, path-to-regexp). I updated express by itself to 4.21.0. npm audit passed fine then, and my app still worked fine.

Then I updated the @remix-run/node and @remix-run/react components to 2.12.0. All was still well with my app. The @remix-run/express component still was using @remix-run/[email protected] at this point, however.

Lastly, I updated @remix-run/express, and that's when my app got into an endless loop at startup with this error on the dev console:
Initial URL (undefined) does not match URL at time of hydration (/), reloading page...

What changes between @remix-run/express 2.9.1 and 2.12.0 might require changes in my code? The only function I use from that module directly is in my express startup script, which calls createRequestHandler() like so:

function getRequestHandler(build) {
	function getLoadContext(_, res) {
		return { cspNonce: res.locals.cspNonce }
	}
	return createRequestHandler({ build, mode: MODE, getLoadContext })
}

[jimzer]

Facing this issue right now too 😅

Here is my server.mjs file

import { createRequestHandler } from "@remix-run/express";
import { installGlobals } from "@remix-run/node";
import express from "express";

installGlobals();

const viteDevServer =
  process.env.NODE_ENV === "production"
    ? undefined
    : await import("vite").then((vite) =>
        vite.createServer({
          server: { middlewareMode: true },
        })
      );

const app = express();

// handle asset requests
if (viteDevServer) {
  app.use(viteDevServer.middlewares);
} else {
  app.use(
    "/assets",
    express.static("build/client/assets", {
      immutable: true,
      maxAge: "1y",
    })
  );
}
app.use(express.static("build/client", { maxAge: "1h" }));

// handle SSR requests
app.all(
  "*",
  createRequestHandler({
    build: viteDevServer
      ? () =>
          viteDevServer.ssrLoadModule(
            "virtual:remix/server-build"
          )
      : await import("./build/server/index.js"),
  })
);

const port = 3000;
app.listen(port, () =>
  console.log("http://localhost:" + port)
);

If I use "@remix-run/express": "2.9.1" it works.

However if I use: "@remix-run/express": "2.12.0" I get an infinite reload loop with this error in the browser console logs: Initial URL (undefined) does not match URL at time of hydration (/), reloading page...

[ecrvich]

@jimzer Thanks for confirming it's not just me. 😄 FYI, since these github forums are pretty dead, I did try posting the same info on Discord the day after I posted here. Discussions are much more lively there, but no replies to this concern yet. That's here FYI:

https://discord.com/channels/770287896669978684/1006299623083741185/threads/1285552143495073853

[jimzer]

No problem!
Thanks for letting me know, I will take a look there too : )
I also posted on X about thee issue (just in case): https://x.com/bitswired/status/1836783317292650736

[kiliman]

I just created a basic Remix app using the Express template on v2.12.0. It works just fine. It's also using [email protected]

❯ npm ls express                 
remix-express-2.12@ /Users/michael/Projects/scratch/remix-express-2.12
├─┬ @remix-run/[email protected]
│ └── [email protected] deduped
├─┬ @remix-run/[email protected]
│ └── [email protected] deduped
└── [email protected]

Are all versions of Remix packages the same and at the latest?

If you're still having the issue, can you create a simple repro on StackBlitz or Codesandbox?

[ecrvich]

@jimzer FYI, I posted in the thread on Discord with a little bit more info (and a wild guess at the 2.12.0 change that causes this)...you should be able to upgrade to 2.11.2 (one upgrade below 2.12.0) without the looping.

[jimzer]

@ecrvich Thank you!

[ecrvich]

Solved:

It looks like the culprit for me must have been what @kiliman hinted at: a mismatch of package versions, specifically @remix-run/dev. I missed that one due to it only being installed globally on my laptop (I didn't notice that "npm i @remix-run/dev@latest" was doing nothing for that one without the -g flag). I don't know if that really explains why simply downgrading the other three to 2.11.2 was enough to fix the issue (my global dev package was certainly NOT 2.11.2, and may have even been older than 2.9.1). But, no more hydration error and my upgrade path isn't blocked, so I'm happy.