"Unhandled Runtime Error, incompatible-href-as" when using _middleware.ts rewrites with getStaticProps + fallback true as well as when using CSR only.

What version of Next.js are you using?

12.0.7

What version of Node.js are you using?

17.1.0

What browser are you using?

Chromium, Brave, Firefox

What operating system are you using?

Archlinux

How are you deploying your application?

locally with yarn dev and also yarn start

Describe the Bug

I get Unhandled Runtime Error, incompatible-href-as when using _middleware.ts to do hostname rewrites, other details and screenshots in this issue : https://github.com/vercel/examples/issues/55 .

The error happens when cloning this Vercel example repo https://github.com/vercel/examples/tree/main/edge-functions/hostname-rewrites or just with a minimal example as shown below (I have no <Link/> or <a/> in my code)

The error comes under these conditions :

• no getStaticProps
• when fallback is true and trying to access a non generated at build path ( that’s what the screenshot is about ) ( it works well with fallback blocking )

Code

pages/_middleware.ts

import { NextRequest, NextResponse } from "next/server";

export default function middleware(req: NextRequest) {
  const { pathname } = req.nextUrl;
  // Get hostname (e.g. vercel.com, test.vercel.app, etc.)
  const hostname = req.headers.get("host");


  const currentHost = hostname?.replace(`.${process.env.ROOT_URL}`, "");

  console.log("current host", currentHost);

  if (pathname.startsWith(`/_sites`)) {
    return new Response(null, { status: 404 });
  }

  if (
    !pathname.includes(".") && // exclude all files in the public folder
    !pathname.startsWith("/api") // exclude all API routes
  ) {
    const rewrited_path = `/_sites/${currentHost}${pathname}`;
    console.log(`pushed to ${rewrited_path}`);
   
    return NextResponse.rewrite(rewrited_path);
  }
}

working when visiting /newpage (if the used subdomain path has been generated at build, if not it triggers the error) with getStaticProps :

pages/_sites/[site]/newpage.tsx

export default function NewPage({ domain }) {
  return <div> New Page {domain} </div>;
}


export async function getStaticProps(context) {
  const domain = context.params.site;

  return {
    props: {
      domain,
    },
  };
}

const mockDB = [
  {
    name: "Site 1",
    description: "Subdomain + custom domain",
    subdomain: "domain-1",
  },
  {
    name: "Site 2",
    description: "Subdomain only",
    subdomain: "new-domain",
  },
  {
    name: "Site 3",
    description: "Subdomain only",
    customDomain: "custom-domain.com",
  },
];


export async function getStaticPaths() {
  const site_paths = mockDB.map((elem) => {
    if (elem.customDomain) {
      return { params: { site: elem.customDomain } };
    } else {
      return { params: { site: elem.subdomain } };
    }
  });

  return {
    paths: site_paths,
    fallback: true,
  };
}

Not working when visiting /newpage, get the error

export default function NewPage() {
  return <div>NewPage</div>;
}

Expected Behavior

No error.

To Reproduce

Run the snippets of code below to check :

• no getStaticProps
• when fallback is true and trying to access a non generated at build path

Clone this repo from vercel examples https://github.com/vercel/examples/tree/main/edge-functions/hostname-rewrites to only check:

• when fallback is true and trying to access a non generated at build path

[StitiFatah]

Hi @moinulmoin. Have you personally found a solution ? Using fallback blocking isn’t a big deal but not being able to use CSR is kinda unfortunate.

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.