Vite: User-define route export referencing server-only code not working

[akoenig]

What version of Remix are you using?

2.2.0

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

• Yes

Steps to Reproduce

1. Clone this repository: https://github.com/akoenig/remix-repro-vite-redirect
2. Open http://localhost:5173
3. Click on the button "To Onboarding"

In one route, /onboarding, there is a function responsible for constructing its own URL (getUrl). This function gets imported in the index route and used within a redirect. This redirect fails occasionally.

Expected Behavior

The redirect should work always.

Actual Behavior

The redirect works occasionally.

[hi-ogawa]

Experimenting with the reproduction repo, it looks like this is something to do with re-exporting getUrl from routes/onboarding.tsx to routes/_index.tsx, and getUrl relies on server only file getBaseUrl.server with named import.

Replacing server-only import from "named" import to "star *" import seems to make it work.
(I still have no idea about the actual cause, but this was a random guess from the fact that remix-empty-server-modules replaces the module to export default {} on client).

// in routes/onborading.tsx

//
// before
//
import { getBaseUrl } from "~/utils/getBaseUrl.server";

export function getUrl(request: Request) {
  return `${getBaseUrl(request)}/onboarding`;
}

//
// after
//
import * as serverLib from "~/utils/getBaseUrl.server";

export function getUrl(request: Request) {
  return `${serverLib.getBaseUrl(request)}/onboarding`;
}

Another note is that I think vite remix is less forgiving about import/export between two route files (cf. https://remix.run/docs/en/main/discussion/hot-module-replacement#supported-exports), so refactoring it out such structure might be recommended.

[akoenig]

@hi-ogawa, thank you for taking the time to review my repro repository. You're absolutely right, using named imports indeed functions as expected. While I can understand the reasons behind the supported exports, I'm unsure if it should be restricted in this case, where a full page reload would be acceptable (e.g. when modifying the getUrl function).

In fact, I really like this pattern of treating the route component as the single source of truth. I'm wondering if this opens up a completely new possibility. Perhaps having a "reflect" function within a route component would be interesting. Here's an example that came to mind:

export function reflect() {
  return {
    url(request: Request) {
      return `${getBaseUrl()}/onboarding`
    }
  } as const;
}

[pcattori]

Duplicate of #7924

[pcattori]

With Vite, Remix gets stricter about which exports are allowed from your route modules.

For more see #8171