Hi all I followed the next tutorial
https://nextjs.org/docs/advanced-features/dynamic-import
and works great for components
But I need to fetch data dynamically. Situation:
I have one simple component named MyItems that receives as props items which is a list of elements title, category.
I want to dynamically import these lists from typescript files stored in page-data/myitems/de|en.ts and so on
So these ts files export array after doing some calculations that is why i don't import json dynamically or search for other solution. I need them to have code and export an array
export default [{name: 'somename', title: somemagic()]
I have this page in pages/page
const Page = async ({ t, ...props }: Props) => {
const locale = props._nextI18Next.initialLocale;
const items = (await import(`../page-data/myitems/${locale}`)).default;
console.log(items); // HERE I SEE OUTPUT FINE
return (
<>
<Head>
<title>dynamic test</title>
</Head>
{/*@ts-ignore*/}
<MyPage items={items} />
</>
);
};
The error I get is that cannot return promise to react So my understanding is that I cannot export async component.
Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.
That is all fine, so my question is howcan I solve this situation then ?
The goal is still the same (items are fetched fine now but the component is returned as promise due to async and rest of react magic fails)