I've got live preview up and running in the iframe, but when I go to update content, nothing changes.
I'm using Next.js with the local API, and I get two errors:
1. In the Payload admin dashboard:
Uncaught SyntaxError: "[object Object]" is not valid JSON
at JSON.parse (<anonymous>)
at handleMessage (webpack-internal: ...)
2. In the live preview iframe:
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'forEach')
at traverseFields (webpack-internal ...)
Here's the relevant code:
const LayoutComponent = ({ layoutData }: Props) => {
const { data } = useLivePreview<Layout>({
initialData: layoutData,
serverURL: process.env.PAYLOAD_PUBLIC_SERVER_URL || "http://localhost:3000",
});
return (
<LayoutWrapper>
{data.map((item, index) => { ... }
</LayoutWrapper>
);
};
Any help is very much appreciated!
I could still use help with this if anyone has ideas!
I've managed to figure this out - the initial
layoutData
was being passed in as an array, and
data
was being passed in as an object, one of whose keys was the initial array. A simple conditional fixed it:
const LayoutComponent = ({ layoutData }: Props) => {
const { data } = useLivePreview<Layout>({
initialData: layoutData,
serverURL: "http://localhost:3000",
});
const dataArray = Array.isArray(data) ? data : data.components;
return (
<LayoutWrapper>
{dataArray.map((item, index) => { ... }
</LayoutWrapper>
);
};
/solcve
Star
Discord
online
Get help straight from the Payload team with an Enterprise License.