`request.url` is 'http://undefined' when https is enabled in framework mode

[dstarosta]

Reproduction

https://github.com/richardscarrott/react-router-https-url-bug

1. Clone https://github.com/richardscarrott/react-router-https-url-bug (I couldn't get https working directly on StackBlitz)
2. npm run dev
3. Visit https://localhost:5173/
4. Accept warning (I'm using @vitejs/plugin-basic-ssl which generates untrusted certs)

EXPECT: request.url to be https://localhost:5173/
ACTUAL: request.url is https://undefined/

Original Repro Steps

Create a new project using create-react-router@latest.

Add the following to the vite.config.ts

server: {
    https: {
      pfx: [path] // cert and key can also be used
    },
    port: 8001 // optional
}

Add the following loader to the home route

export function loader({ request }: Route.LoaderArgs) {
  console.log(request.url);

  return {};
}

The output is "http://undefined".

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (24) x64 13th Gen Intel(R) Core(TM) i7-13700
    Memory: 15.20 GB / 31.71 GB
  Binaries:
    Node: 22.17.1 - C:\nvm4w\nodejs\node.EXE
    npm: 10.9.2 - C:\nvm4w\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (134.0.3124.51)
    Internet Explorer: 11.0.22621.3527

Used Package Manager

npm

Expected Behavior

The request.url should be "https://localhost:8001".

Note: Host and Referer headers have the expected values.

Actual Behavior

The request.url is "http://undefined".

[dstarosta]

The latest version gets the "https" protocol correctly but the host is still undefined.

[github-actions]

To align with our new Open Governance model, we are now requiring that all issues have a minimal and runnable reproduction. To that end, we're doing some housekeeping in the repo to clean up existing issues that do not have a valid reproduction. This should get us down to a more manageable number of issues and allow us to be more responsive to existing and newly filed issues.

We're using a GitHub actions script to identify issues without a reproduction by looking for a StackBlitz, CodeSandbox, or GitHub link in the issue body. This won't be perfect, so if this issue has a reproduction on another platform, please comment back on here, and we can re-open the issue. Similarly, if there's a reproduction buried in a comment, please move the link into the description and comment back. Please tag @brophdawg11 or @brookslybrand in your comment so we get a notification as well 🙂.

If this issue did not have a reproduction but is still valid, or if you wish to start with a fresh issue, please create a new issue with a fresh reproduction against v7 and link to this issue in the new description.

If this is a feature request, please open a new Proposal Discussion in React Router, and if it gets enough community support, it can be considered for implementation.

If you have any questions, you can always reach out on Discord. Thanks again for providing feedback and helping us make React Router even better!

[richardscarrott]

@dstarosta did you find a solution to this?

[dstarosta]

I went with TanStack. 😆

[richardscarrott]

I worked around this at a specific callsite where it was breaking for me (OAuth callback URL generation).

// Handles malformed React Router `request.url` when using https during local dev
// https://github.com/remix-run/react-router/issues/14010
const getOrigin = (request: Request) => {
  const url = new URL(request.url);
  if (url.hostname === "undefined") {
    // Fallback to host header when request.url is malformed
    const host = request.headers.get("host");
    const protocol = url.protocol;
    if (host) {
      return `${protocol}//${host}`;
    }
  }
  return url.origin;
};

@brophdawg11 @timdorr — is this and #14278 marked as not planned because there wasn't a clean reproduction? If so I can create one as prob worth fixing (assuming it's a RR issue and not vite).

[brophdawg11]

yeah - we did this in an automated process a while back as part of a larger housekeeping effort. If a repro can be provided, we can reopen the issue

[richardscarrott]

@brophdawg11 ok cool, here's a repro:

1. Clone https://github.com/richardscarrott/react-router-https-url-bug (I couldn't get https working directly on StackBlitz)
2. npm run dev
3. Visit https://localhost:5173/
4. Accept warning (I'm using @vitejs/plugin-basic-ssl which generates untrusted certs)

EXPECT: request.url to be https://localhost:5173/
ACTUAL: request.url is https://undefined/

 System:
    OS: macOS 15.6.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 809.88 MB / 32.00 GB
    Shell: 3.7.1 - /opt/homebrew/bin/fish
  Binaries:
    Node: 20.19.2 - ~/.nvm/versions/node/v20.19.2/bin/node
    npm: 10.8.2 - ~/.nvm/versions/node/v20.19.2/bin/npm
    pnpm: 10.11.0 - /opt/homebrew/bin/pnpm
    Watchman: 2025.05.26.00 - /opt/homebrew/bin/watchman
  Browsers:
    Chrome: 140.0.7339.132
    Edge: 138.0.3351.55
    Safari: 18.6
  npmPackages:
    @react-router/dev: ^7.7.1 => 7.8.2
    @react-router/node: ^7.7.1 => 7.8.2
    @react-router/serve: ^7.7.1 => 7.8.2
    react-router: ^7.7.1 => 7.8.2
    vite: ^6.3.3 => 6.3.6

[brophdawg11]

Thanks @richardscarrott!

[phiggins]

I believe I found the root cause for this in node-fetch-server and fixed it there: remix-run/remix#10883