Issue
I'm having errors here in data property
interface Props {
params: { slug: string };
}
const Page = async ({ params }: Props) => {
const data: any = await getPage(params.slug);
// responsible for dynamically rendering the appropriate organism (e.g., ContactUs or AboutUs etc...) within the PageComponent based on the dynamic route parameter.
const PageComponent = dynamic(() =>
import(`@/components/organisms/${data.slug}`).then(
(module) => module.default
)
);
return (
<div>
<PageComponent data={data} />
</div>
);
};
Error Type '{ data: any; }' is not assignable to type 'IntrinsicAttributes'. Property 'data' does not exist on type 'IntrinsicAttributes'.ts(2322) (property) data: any
Data works and logs perfectly fine in my component contact-us component
interface Props {
data: any;
}
export default function ContactUs({ data }: Props) {
console.log(data);
return <div>{}</div>;
}
How do I deal with the type error?
Solution
Looks like this issue here is because NextJS doesn't know what type you're importing so it doesn't know what the props type should be.
The solution should be something like this:
interface Props {
params: { slug: string };
}
const Page = async ({ params }: Props) => {
const data: any = await getPage(params.slug);
// responsible for dynamically rendering the appropriate organism (e.g., ContactUs or AboutUs etc...) within the PageComponent based on the dynamic route parameter.
const PageComponent = dynamic<{data: any}>(() =>
import(`@/components/organisms/${data.slug}`).then(
(module) => module.default
)
);
return (
<div>
<PageComponent data={data} />
</div>
);
};
note the <{data: any}> on the dynamic call
Answered By - Glitcher
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.