Hi, I was trying to do this as written by @yang https://www.plasmic.app/blog/nextjs-commerce-tutorial, but when I implement it, i keep running into error attached in the screenshot. Any idea how to solve this? thanks!
Hi Kerry, thanks for reporting, would you mind sharing some more details on how to reproduce this issue? We’re having some trouble reproducing it
Can you also share your plasmic project URL?
i discovered it was because of how plasmic data was being called. it has to be wrapped in a useeffect for it to work.
Had to change the code to the following instead
const [plasmicData, setPlasmicData] =
React.useState<ComponentRenderData | null>(null)
React.useEffect(() => {
async function fetchData() {
try {
const plasmicData = await PLASMIC.maybeFetchComponentData(pathString)
setPlasmicData(plasmicData)
} catch (error) {
return <Error statusCode={404} />
}
}
fetchData()
}, [])
Hi, that looks like you’re calling maybeFetchComponentData from inside a component, but this will only load the Plasmic design in the user’s browser - for much better performance you can put that inside the getStaticProps function for static page generation.