Initial URL (/) does not match URL at time of hydration (/h5/), reloading page...

[aofong]

What version of Remix are you using?

1.18.1

Are all your remix dependencies & dev-dependencies using the same version?

• Yes

Steps to Reproduce

{
  "private": true,
  "name": "demo",
  "version": "1.0.0",
  "sideEffects": false,
  "scripts": {
    "build": "remix build",
    "dev": "remix dev",
    "start": "remix-serve build",
    "typecheck": "tsc"
  },
  "dependencies": {
    "@remix-run/css-bundle": "^1.18.1",
    "@remix-run/node": "^1.18.1",
    "@remix-run/react": "^1.18.1",
    "@remix-run/serve": "^1.18.1",
    "@types/react": "^18.0.35",
    "@types/react-dom": "^18.0.11",
    "axios": "^1.4.0",
    "cron": "^2.3.1",
    "isbot": "^3.6.8",
    "lodash": "^4.17.21",
    "qs": "^6.11.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@remix-run/dev": "^1.18.1",
    "@remix-run/eslint-config": "^1.18.1",
    "eslint": "^8.38.0",
    "typescript": "^5.0.4"
  },
  "engines": {
    "node": ">=14.0.0"
  }
}

/** @type {import('@remix-run/dev').AppConfig} */
module.exports = {
  ignoredRouteFiles: ['**/.*'],
  appDirectory: 'app',
  assetsBuildDirectory: 'public/build',
  serverBuildPath: 'build/index.js',
  publicPath: '/h5/build/',
  serverModuleFormat: 'cjs',
  tailwind: true,
  serverDependenciesToBundle: ['axios'],
  future: {
    v2_errorBoundary: true,
    v2_headers: true,
    v2_meta: true,
    v2_normalizeFormMethod: true,
    v2_routeConvention: true
  }
};

Deploy the project in the subdirectory /h5
Visit us at http://192.168.1.1/h5/
Browser console error chunk-YFZWJFVK.js:33 Initial URL (/) does not match URL at time of hydration (/h5/), reloading page...
And the page refreshes indefinitely

Expected Behavior

Be able to access normally

Actual Behavior

Browser console error chunk-YFZWJFVK.js:33 Initial URL (/) does not match URL at time of hydration (/h5/), reloading page...
And the page refreshes indefinitely

[brophdawg11]

Can you provide a minimal reproduction of this issue? Remix does not support the concept of a basename and running from a subdirectory is not officially supported or recommended since it will cause issues with hydration and such since things like useLocation will generate different values on the server and the client. A minimal reproduction would help me see how your server is setup and hopefully we can offer some targeted advice on how to resolve the issue.

[wenzf]

The reloading and error message is the same as when dependencies of package.json and server/packackage.json have different versions.

[brophdawg11]

I'm going to close this since we don't have a reproduction, but please re-open if you are able to put one together!

[jcsmorais]

@brophdawg11 I'm able to reproduce the reported behavior with the following:

• A non-remix app in /app (filesystem) running in localhost:8000
• A remix app in /app/remix (filesystem) running in localhost:3000
• A reverse proxy sending requests from localhost:8000/remix/etc and localhost:8000/build/etc to localhost:3000/etc and localhost:3000/build/etc respectively

Both proxies seem to work but the page keeps getting refreshed looping through the page content and a 404 Not Found (as exhibited in the sshots below).

Any hints on how I can work around this behavior?

Thank you

[brophdawg11]

Remix does not support URL rewriting, you'll need to make your remix app run for the full URL /remix/etc

[0xahmedk]

Has anyone got solution to this?

[vincaslt]

I need this as well. Would like to use this with Shopify, but need the support for URL rewriting: https://shopify.dev/docs/api/shopify-app-remix/v2/authenticate/public/app-proxy

[crate-scarter]

I have a use case that is somewhat related to the mentioned example that I would be curious if it was supported.

I'm looking to host parallel sites, where the Remix app is the new site and there is a legacy site that exists. I'm trying to cutover pieces of the legacy site to exist in the remix site as their own URL path to avoid having to cutover entire pages at a time. For example, I have a Remix /footer route that exists that serves only the footer for the remix app and avoids the rest of it (still using root though). I've setup the reverse proxy so that any request that is made to a url would go through the legacy site, and the legacy site fetches HTML from the Remix site using the reverse proxy's base url with /footer. This routes the request to the Remix app successfully. I've also handled loading all additional styles with the reverse proxy.

The issue is that when trying to load the page, Remix is trying to hydrate the component that was served from /footer, but the actual client url is just a base url ( / ), and its failing the hydration and triggering a page reload. Is there a way to handle that scenario such that it doesn't care what the client url is for something?