#Live Preview failed to execute 'postMessage' on 'DOMWindow'

29 messages · Page 1 of 1 (latest)

shadow latch
#

Hi Payload! Working on setting up live preview :)

I am getting a handful of errors at the moment.

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('http://localhost:3000') does not match the recipient window's origin ('http://localhost:3030').

My frontend is running at localhost:3000, and my CMS is running at localhost:3030.

In my payload.config.ts I have set CORS and CSRF like so:

csrf: ['http://localhost:3000', 'http://localhost:3030'],```

In my frontend (NextJS App router application), I have a page.tsx at a dynamic route ```[[...slug]]``` that fetches the page from the CMS, and then passes that to a client component that looks like this: 

```'use client';
import { useLivePreview } from '@payloadcms/live-preview-react';

const ClientPage = ({ page, article, locale, slug }: { page: any; article: any; locale: string; slug: any }) => {
    const { data } = useLivePreview<any>({
        initialData: page,
        serverURL: process.env.CMS_URL_DEV!,
        depth: 0,
    });
    console.log(data.docs[0].layout);
    if(data){
        return(
            <div>{data.docs[0].layout[0].content.title}</div>
        )
    }
};

export default ClientPage;

I am also receiving an error/warning stating;
Warning: Rendering <Context.Consumer.Consumer> is not supported and will be removed in a future major release. Did you mean to render <Context.Consumer> instead?

This warning appears on the line where I try to render the data's content in the <div> in the ClientPage-component.

Any help with any of these errors is appreciated :)

scarlet zenithBOT
vernal gazelle
#

And what version of Payload are you using?

shadow latch
#

Payload 2.12.1. Same issue in private browsing session.

#

The Live Preview loads fine, but won't update with new data

#

the console log I have there displays the expected data, so the initial fetching also seems to work fine

vernal gazelle
#

Are you using Payload as standalone or the NextJS Payload project

shadow latch
#

Standalone, they are hosted separately. The CMS is also being used for other frontends, so I enabled the Live Preview on a specific collection instead of in the config

vernal gazelle
#

would you mind sharing your Payload code?

shadow latch
#

the livepreview on the collection?

            url: ({data, documentInfo, locale}) => {
                return `http://localhost:3000/${locale?.code}/livepreview/${data.slug}`
            }
        }
vernal gazelle
#

do you have any csp settings in your next.config that could be blocking it?

shadow latch
#

empty nextConfig apart from images: { remotePatterns: [ ...

#

my CMS does have SSO via oAuth2 set up, could that be causing issues when the frontend is trying to post to the CMS?

#

I checked cookies and seems like the CMS and the frontend share cookies fine think

#

I removed "depth: 0" from my useLivePreview-call, and that (for now) have removed the Warning about <Context.Consumer.Consumer>

#

the primary issue of "Failed to execute 'postMessage' on 'DOMWindow'" still remains tho smilethink

vernal gazelle
shadow latch
#

I do have custom middleware configured, mainly for i18n from 'next-intl':


export default createMiddleware({
    locales: ['en', 'no', 'se'],

    defaultLocale: 'en',
    localePrefix: 'as-needed',
    localeDetection: false,
});

export const config = {
    matcher: ['/((?!api|_next|_vercel|.*\\..*).*)']
}```

Don't feel like that should impact Live Preview, but at this point idk haha
vernal gazelle
shadow latch
#

I added my custom livepreview route to my middleware like this:

    matcher: ['/((?!api|_next|_vercel|liveprewview|.*\\..*).*)']
}

which resulted in the Live Preview tab fetching the wrong page from my frontend. I'm also getting these errors again:

Warning: Rendering <Context.Consumer.Provider> is not supported and will be removed in a future major release. Did you mean to render <Context.Provider> instead?

#

Also tried adding it in a separate matcher like this:

    matcher: ['/((?!api|_next|_vercel|liveprewview|.*\\..*).*)', '/([\\w-]+)?/livepreview/(.+)'],
};```

Then it loads the page fine, but it still wont read updates made in the CMS.
#

I've based my middleware on the next-intl docs, since that's the i18n solution we are using:

  // Matcher entries are linked with a logical "or", therefore
  // if one of them matches, the middleware will be invoked.
  matcher: [
    // Match all pathnames except for
    // - … if they start with `/api`, `/_next` or `/_vercel`
    // - … the ones containing a dot (e.g. `favicon.ico`)
    '/((?!api|_next|_vercel|.*\\..*).*)',
    // However, match all pathnames within `/users`, optionally with a locale prefix
    '/([\\w-]+)?/users/(.+)'
  ]
};```

https://next-intl-docs.vercel.app/docs/routing/middleware#matcher-no-prefix
vernal gazelle
#

You have spelled “preview” wrong in your matcher

shadow latch
#

will check it again when im back at the office tomorrow haha

vernal gazelle
#

How did you get on with this?

shadow latch
#

When I have it configured like this:

    matcher: ['/((?!api|_next|_vercel|liveprewview|.*\\..*).*)'],
};```

the CMS fetches 'localhost/news' instead of 'localhost/livepreview/news'.

With this second approach the CMS fetches the page fine, but updates are not rendered:

```export const config = {
    matcher: ['/((?!api|_next|_vercel|.*\\..*).*)', '/([\\w-]+)?/livepreview/(.+)'],
};```
#

My issue was simply that I passed the wrong data to the initialData-value on the useLivePreview-method.

I passed it the return value from the CMS instead of the actual document object - fixed it by sending in "page.docs[0]" instead of just "page"