Live preview not updating content

default discord avatar
ggphntms_62927
3 weeks ago

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

    Open the post
    Continue the discussion in Discord
    Like what we're doing?
    Star us on GitHub!

    Star

    Connect with the Payload Community on Discord

    Discord

    online

    Can't find what you're looking for?

    Get help straight from the Payload team with an Enterprise License.