Live Preview View Custom Component is not working

[tsemachh]

Link to reproduction

No response

Environment Info

Node.js v22.8.0

Binaries:
  Node: 22.8.0
  npm: 10.8.2
  Yarn: N/A
  pnpm: 9.4.0
Relevant Packages:
  payload: 3.0.0-beta.104
  next: 15.0.0-canary.104
  @payloadcms/db-mongodb: 3.0.0-beta.104
  @payloadcms/graphql: 3.0.0-beta.104
  @payloadcms/live-preview: 3.0.0-beta.104
  @payloadcms/next/utilities: 3.0.0-beta.104
  @payloadcms/plugin-cloud-storage: 3.0.0-beta.104
  @payloadcms/richtext-lexical: 3.0.0-beta.104
  @payloadcms/storage-s3: 3.0.0-beta.104
  @payloadcms/translations: 3.0.0-beta.104
  @payloadcms/ui/shared: 3.0.0-beta.104
  react: 19.0.0-rc-06d0b89e-20240801
  react-dom: 19.0.0-rc-06d0b89e-20240801
Operating System:
  Platform: linux
  Arch: x64
  Version: #44-Ubuntu SMP PREEMPT_DYNAMIC Tue Aug 13 13:35:26 UTC 2024
  Available memory (MB): 31817
  Available CPU cores: 8

Describe the Bug

We try and follow documentation at:
https://payloadcms.com/docs/beta/admin/views#document-views

livePreview The LivePreview view is used to display the Live Preview interface. It is rendered within the "Live Preview" tab. More details.

But this is not working because of missing code which should handle it.
File: packages/next/src/views/Document/getViewsFromConfig.tsx - Lines 312-325

            case 'preview': {
              if (livePreviewEnabled) {
                DefaultView = {
                  Component: DefaultLivePreviewView,
                }
              }
              break
            }

            case 'versions': {
              if (!overrideDocPermissions && docPermissions?.readVersions?.permission) {
                CustomView = {
                  payloadComponent: getCustomViewByKey(views, 'versions'),
                }

The preview case is not handling the CustomView - aka:

CustomView = {
                  payloadComponent: getCustomViewByKey(views, 'livePreview'),
                }

Reproduction Steps

In payload.config.ts define next customization in one of the Collections:

components: {
      views: {
        edit: {
          default: {
            Component: '/components/views/CustomDefaultEditView',
          },
          livePreview: {
            Component: '/components/views/LivePreview/LivePreviewView'
          }
        },
      },
    }

Expected behavior is that customized live preview view will replace default live preview view , but we got the default.

Adapters and Plugins

No response

[tsemachh]

If needed I can post a PR , not a big change

[kendelljoseph]

PR is opened that addresses this issue.
#8930

[github-actions]

This issue has been automatically locked.
Please open a new issue if this issue persists with any additional detail.

[paulpopus]

This is released as of beta 122 I believe