Side by side live preview doesn't work with demo template?

mccombslast year

3

Application error: a client-side exception has occurred while loading localhost (see the browser console for more information).
---
SyntaxError: Failed to execute 'postMessage' on 'Window': Invalid target origin '/next/preview?slug=home&collection=pages&path=%2Fhome&previewSecret=67S0GdUQE3uNVfXYvuF6vHdLNoYFQukSc4r11LZLyqI' in a call to 'postMessage'.

• 

  thepatrick00last year

  I got the same error. If you don' tmind how did you come up with the preview_secret value in the first place? I see nothing in the docs 😞

• 

  cedric.dev_last year

  @790784481002389504

  just encountered this issue and found the fix.

  
  
  

  As preview secret you can take any random string, similar to PAYLOAD_SECRET

  
  
  

  In the template they actually added it to [.env.example](

  https://github.com/payloadcms/payload/blob/main/templates/website/.env.example#L17

  ), but not to .env. You have to do that manually.

  
  
  

  This should work with version 3.33.

  
  
  

  In case you tried to upgrade it as I did to 3.37, you will probably get the preview showing up quickly and disappearing again, for docs with images. Open your console logs and you will probably see

  
  
  

  on next/image, hostname "your-ip" is not configured under images in your next.config.js
  

  
  

  Not sure why localhost is not used to serve the images, as it is in v3.33. Maybe a bug.

  
  
  

  To fix it, you can just add your IP in next.config.js:

  
  
  

  /** @type {import('next').NextConfig} */
  const nextConfig = {
    images: {
      remotePatterns: [
        ...[NEXT_PUBLIC_SERVER_URL /* 'https://example.com' */].map((item) => {
          const url = new URL(item)
  
          return {
            hostname: url.hostname,
            protocol: url.protocol.replace(':', ''),
          }
        }),
        {
          protocol: 'http',
          hostname: 'your-ip',
        },
      ],
    },
    reactStrictMode: true,
    redirects,
  }

• 

  drago152012 months ago

  I found that Live preview never works, so I opened up [this issue](

  https://github.com/payloadcms/payload/issues/12551

  )