Live preview not updating content

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

was being passed in as an array, and

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