Context : I have a button that pops a SideSheet component when clicked. The SideSheet is an async component that fetches user data and renders it. But I also want to dynamically import the SideSheet component, since it's a bit heavy and it doesn't initially need to show.
I tried :
//@side-sheet.tsx
export default async function SideSheet(...)
//@page.tsx
const SideSheet = dynamic(() => import("@/components/side-sheet"));
But I get this error : Argument of type '() => Promise<typeof import("c:/Users/Hatem/Documents/vscode 12-10-2021/best-in-role/src/components/side-bar")>' is not assignable to parameter of type 'DynamicOptions<{}> | Loader<{}>'.
If I remove async from export default async function SideSheet(...), then the error disappears. (But I can't remove it because I need to await user data).
What's the solution for this situation?