Remix app erroring out with message - Initial URL (/) does not match URL at time of hydration (/deployment/my-portal-ui/), reloading page...

[srivastava-abhijeet]

Hi all,

I have remix app having express adapter which is deployed at the path - https://api-dev.apps.com/deployment/my-portal-ui/
As you can see its not at main domain instead its at path /deployment/my-portal-ui/. The reason of this path is, in my organisation we have multiple application hosted at https://api-dev.apps.com so additional path is given to individual apps.

Please note that I have updated publicPath in remix.config.js file as-

publicPath: '/deployment/my-portal-ui/build/',

Now when I am running app it renders the page momentarily but then page refreshes indefinitely and giving below error -

Initial URL (/) does not match URL at time of hydration (/deployment/my-portal-ui/), reloading page...

I have similar use case as this #6785 and I see comment by @brophdawg11

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.

Do we have any solution/work around to handle this issue.

[kiliman]

The issue is that your routes don't match the URL. Remix doesn't support URL rewriting.

However, you could update your routes so it has the extra top-level paths as part of the config.

There are a couple of ways to do that. The first is to just update your routes to add those folders directly: routes/deployment.my-portal-ui._index.tsx

Granted, that only works if those top-level paths are static.

The other option is to use my package remix-flat-routes. It's a superset of the new v2 flat routes convention. It includes some enhancements, with one of them being the ability to set the basePath. This will automatically add the basePath to all the top level routes in your app.

const { flatRoutes } = require('remix-flat-routes')

/**
 * @type {import("@remix-run/dev").AppConfig}
 */

const BASE_PATH = '/deployment/my-portal-ui'
module.exports = {
  // ignore all files in routes folder to prevent
  // default remix convention from picking up routes
  ignoredRouteFiles: ['**/*'],
  publicPath: `${BASE_PATH}/build/`,
  routes: async defineRoutes => {
    return flatRoutes('routes', defineRoutes, { basePath: BASE_PATH })
  },
}

[densekernel]

Thanks @kiliman!

[kiliman]

Remix now supports basename via the Vite compiler, so you no longer need remix-flat-routes just for this.

https://remix.run/docs/en/main/file-conventions/vite-config#basename

[srivastava-abhijeet]

Thanks @kiliman for your input. The original error message is gone but now some other error is coming with same page refresh indefinitely.

Application Error
TypeError: Cannot read properties of undefined (reading 'handle')
at https://api-dev.apps.com/deployment/my-portal-ui/build/_shared/chunk-WS73KWW3.js:34:2250
at Array.map ()
at https://api-dev.apps.com/deployment/my-portal-ui/build/_shared/chunk-WS73KWW3.js:34:2170
at Object.useMemo (https://api-dev.apps.com/deployment/my-portal-ui/build/_shared/chunk-WS73KWW3.js:7:25817)
at u.useMemo (https://api-dev.apps.com/deployment/my-portal-ui/build/_shared/chunk-KHAKA6KS.js:1:6752)
at aa (https://api-dev.apps.com/deployment/my-portal-ui/build/_shared/chunk-WS73KWW3.js:34:2156)
at Cv (https://api-dev.apps.com/deployment/my-portal-ui/build/_shared/chunk-WS73KWW3.js:40:2802)
at ss (https://api-dev.apps.com/deployment/my-portal-ui/build/_shared/chunk-WS73KWW3.js:7:19497)
at rh (https://api-dev.apps.com/deployment/my-portal-ui/build/_shared/chunk-WS73KWW3.js:9:43873)
at eh (https://api-dev.apps.com/deployment/my-portal-ui/build/_shared/chunk-WS73KWW3.js:9:39648)

Here is my remix.config.js file --

const { flatRoutes } = require('remix-flat-routes');

/** @type {import('@remix-run/dev').AppConfig} */
module.exports = {
  devServerPort: 8002,
  ignoredRouteFiles: ['**/*'],
  appDirectory: 'app',
  assetsBuildDirectory: 'public/build',
  serverBuildPath: 'build/index.js',
  publicPath: '/deployment/my-portal-ui/build/',
  serverDependenciesToBundle: ['axios'],
  serverModuleFormat: 'cjs',
  future: {
    v2_errorBoundary: true,
    v2_headers: true,
    v2_meta: true,
    v2_normalizeFormMethod: true,
    v2_routeConvention: true
  },
  routes: async (defineRoutes) => {
    return flatRoutes('routes', defineRoutes, {
      basePath: '/deployment/my-portal-ui'
    });
  }
};

[kiliman]

Have you confirmed that all your scripts are downloading properly? What, if any, errors are you seeing in the DevTools console.

It's working fine for me. Have you tested it against localhost?

[srivastava-abhijeet]

Running on server
So the original error message is not yet resolved. In console, its still showing Initial URL (/) does not match URL at time of hydration (/deployment/my-portal-ui/), reloading page.... I can see in DevTool console, all the scripts are loading properly but since page refreshing indefinitely, scripts are loading again and again and same error message coming in each load.

Here is the error page -

Running on localhost
On localhost the script is failing to load but home page is rendered as its done at server side. (Is it because app is running at http://localhost:300 and not on http://localhost:300/deployment/my-portal-ui/?)

Here is the page snapshot on npm run dev locally -

[adamtheadmin]

I found a filthy hack that fixes this issue

In root.tsx

if (typeof window !== "undefined") {
  const hydratedPathname = window.location.pathname;
  window.__remixContext.url = hydratedPathname;
}

[brophdawg11]

FWIW, this URL check was removed entirely in 2.12.0 via #9890 so hacks should no longer be needed once you upgrade to 2.12.0.