Asked 10 months ago
0 Answers
1 Views
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.
0 Answers