Unhandled Runtime Error, incompatible-href-as about examples HOT 18 CLOSED

LOL what makes you think that? Hahahahah @moinulmoin

from examples.

To whom it may concern, please keep the discussion to the point!

from examples.

Hi again, the issue is solved for me and everything is working with fallback:true and even with CSR when using the last canary version 12.0.8-canary.20. I closed the issue here vercel/next.js#32446

@moinulmoin

from examples.

I can't solve it without having the code. I know what it is about but not sure exactly where the error is.

from examples.

I just simply followed the steps which are in readme.md then I am getting this error. Could you please give a check now by following steps? thanks

from examples.

I'm coming up with the same issue with a fresh project based on the example. This line is the only reference to a href="/"

There's a similar issue if you visit the About page but the value is /about.

from examples.

Same here, but only in certain conditions :

• exported getStaticProps : no problem
• no getStaticProps : same error as OP's
• when fallback is true and trying to access a non generated at build path : same error again (also tested by cloning the repo)

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>;
}

from examples.

@JohnAllen Could you please help us, man? thank you

from examples.

Just change the value of that. What have you tried? Remove it altogether.

from examples.

I don't think it has anything to do with the href, I don't have any <Link/> or <a/> in my code as you can see above.

from examples.

@JohnAllen ain't you maintaining this example repo?

from examples.

Excellent usage of "ain't" as well.

from examples.

LOL what makes you think that? Hahahahah @moinulmoin

Haha, don't know. I thought you were maintaining this example repo. My bad! then where are official authors/maintainers? we need help regarding this issue 😣

from examples.

@steven-tey help please!

from examples.

@steven-tey help please!

I have created a new issue on NextJs' repo since I believe it's related to NextJS in general and not just to the Vercel platform vercel/next.js#32446

from examples.

@StitiFatah @moinulmoin it's because you don't have corresponding mock data simply adding this to the mock data will solve
{ name: 'Site 4', description: 'Host One', subdomain: 'hostname-1', customDomain: null, },

from examples.

@StitiFatah @moinulmoin it's because you don't have corresponding mock data simply adding this to the mock data will solve { name: 'Site 4', description: 'Host One', subdomain: 'hostname-1', customDomain: null, },

@akinwol Hey mate, having it working without adding the corresponding data is the whole the point of the issue, this piece of code

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

Should return in the browser NewPage subdomain_used whether or not the subdomain is in the mockDB. If it is already in the mockDB and the path has already been generated generated then it's already fine else fallback:true or fallback:"blocking" should play their roles and re run getStaticProps to the subdomain value.

For proof the whole process is perfectly working when setting fallback to "blocking" but with fallback:true it triggers the error.

Example : I visit domain-1.localhost:3000/newpage/, since the domain-1 subdomain is already in the mockDB it works. But now if I visit domain-25.localhost:3000/newpage/ it works perfectly with fallback:"blocking" but not withfallback:true but it should normally work with both.

from examples.

Closing as per the comment above, if the issue still persists please comment again and it'll re-open it.

from examples.