I have the following React component:

export async function Index({ base = (() => __dirname)() }: IndexProps) {
  const sanitizedBase = sanitizeBasedir(base);
  const subPages = await listPages(sanitizedBase, ".", 1);
  return (
    <div>
      <ol>
        {subPages.map((subPage, index) => (
          <li key={index}>
            <a href={subPage.relativePath}>{subPage.title}</a>
          </li>
        ))}
      </ol>
    </div>
  );
}

I use this component on the page.tsx of each route to list the subpages of that route "dynamically".

export default async function Page() {
  return <Index />;
}

This is used by several routes in my app, such as app/route1, app/route2, app/route3 etc. The problem is that when I run next build, the generated website will randomly list the subpages of routeN as the subpages of routeM (N!=M). The results are shuffled. It looks like __dirname is evaluated with the invoker modules context but not in a predictable way.

Is there a way to make this deterministic without having to explicitly pass __dirname (or equivalent) as a prop every time the Index component is used? I've confirmed doing so does the trick, but it would be nice to keep it DRY.