search

payloadcms / payload

Payload is the open-source, fullstack Next.js framework, giving you instant backend superpowers. Get a full TypeScript backend and admin panel instantly. Use Payload as a headless CMS or for building powerful applications.
https://payloadcms.com
MIT License
23.59k stars 1.5k forks source link

Error when using lexical 3.0.0-beta.68 #7315

Closed todor0v closed 2 months ago

todor0v commented 2 months ago

Link to reproduction

No response

Payload Version

3.0.0-beta.68

Node Version

20.13.1

Next.js Version

15.0.0-rc.0

Describe the Bug

After upgrading Payload (and it's dependencies) from 3.0.0-beta.67 to 3.0.0-beta.68, I get an error when opening the panel if there is a rich text field used. Here is the full error message:

Error: Unsupported Server Component type: {...}

The above error occurred in the <NotFoundErrorBoundary> component:

    at em (webpack-internal:///(app-pages-browser)/./node_modules/@payloadcms/richtext-lexical/dist/exports/client/index.js:5990:18)
    at  (Server)
    at WithServerSideProps (Server)
    at WithServerSideProps (Server)
    at WithServerSideProps (Server)
    at up (webpack-internal:///(app-pages-browser)/./node_modules/@payloadcms/ui/dist/exports/client/index.js:7593:17)
    at Rw (webpack-internal:///(app-pages-browser)/./node_modules/@payloadcms/ui/dist/exports/client/index.js:17694:17)
    at div
    at Ft (webpack-internal:///(app-pages-browser)/./node_modules/@payloadcms/ui/dist/exports/client/index.js:17725:22)
    at div
    at eval (webpack-internal:///(app-pages-browser)/./node_modules/@payloadcms/ui/dist/exports/client/index.js:6919:21)
    at div
    at div
    at oL (webpack-internal:///(app-pages-browser)/./node_modules/@payloadcms/ui/dist/exports/client/index.js:17767:24)
    at eval (webpack-internal:///(app-pages-browser)/./node_modules/@payloadcms/ui/dist/exports/client/index.js:6105:22)
    at form
    at Hf (webpack-internal:///(app-pages-browser)/./node_modules/@payloadcms/ui/dist/exports/client/index.js:18154:55)
    at RA (webpack-internal:///(app-pages-browser)/./node_modules/@payloadcms/ui/dist/exports/client/index.js:7039:21)
    at main
    at DefaultEditView (webpack-internal:///(app-pages-browser)/./node_modules/@payloadcms/next/dist/views/Edit/Default/index.js:31:404)
    at EditViewClient (webpack-internal:///(app-pages-browser)/./node_modules/@payloadcms/next/dist/views/Edit/index.client.js:15:107)
    at EditView (Server)
    at  (Server)
    at d (Server)
    at v (Server)
    at OA (webpack-internal:///(app-pages-browser)/./node_modules/@payloadcms/ui/dist/exports/client/index.js:6999:21)
    at mA (webpack-internal:///(app-pages-browser)/./node_modules/@payloadcms/ui/dist/exports/client/index.js:6299:21)
    at Yd (webpack-internal:///(app-pages-browser)/./node_modules/@payloadcms/ui/dist/exports/client/index.js:6275:21)
    at zs
    at Document (Server)
    at  (Server)
    at d (Server)
    at div
    at div
    at Wrapper (webpack-internal:///(app-pages-browser)/./node_modules/@payloadcms/next/dist/templates/Default/Wrapper/index.js:14:13)
    at div
    at HM (webpack-internal:///(app-pages-browser)/./node_modules/@payloadcms/ui/dist/exports/client/index.js:20421:21)
    at DefaultTemplate (Server)
    at Page (Server)
    at InnerLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:248:11)
    at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:74:9)
    at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:82:11)
    at NotFoundErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:76:9)
    at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:84:11)
    at LoadingBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:355:11)
    at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:160:11)
    at InnerScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:158:9)
    at ScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:233:11)
    at RenderFromTemplateContext (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/render-from-template-context.js:16:44)
    at OuterLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:376:11)
    at InnerLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:248:11)
    at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:74:9)
    at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:82:11)
    at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:84:11)
    at LoadingBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:355:11)
    at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:160:11)
    at InnerScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:158:9)
    at ScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:233:11)
    at RenderFromTemplateContext (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/render-from-template-context.js:16:44)
    at OuterLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:376:11)
    at InnerLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:248:11)
    at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:74:9)
    at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:82:11)
    at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:84:11)
    at LoadingBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:355:11)
    at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:160:11)
    at InnerScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:158:9)
    at ScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:233:11)
    at RenderFromTemplateContext (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/render-from-template-context.js:16:44)
    at OuterLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:376:11)
    at Xh (webpack-internal:///(app-pages-browser)/./node_modules/@payloadcms/ui/dist/exports/client/index.js:4131:21)
    at ad (webpack-internal:///(app-pages-browser)/./node_modules/@payloadcms/ui/dist/exports/client/index.js:3771:21)
    at Xd (webpack-internal:///(app-pages-browser)/./node_modules/@payloadcms/ui/dist/exports/client/index.js:6207:21)
    at Q0 (webpack-internal:///(app-pages-browser)/./node_modules/@payloadcms/ui/dist/exports/client/index.js:16484:21)
    at gd (webpack-internal:///(app-pages-browser)/./node_modules/@payloadcms/ui/dist/exports/client/index.js:4208:21)
    at Ju (webpack-internal:///(app-pages-browser)/./node_modules/@payloadcms/ui/dist/exports/client/index.js:3461:21)
    at mg (webpack-internal:///(app-pages-browser)/./node_modules/@payloadcms/ui/dist/exports/client/index.js:20438:21)
    at F (webpack-internal:///(app-pages-browser)/./node_modules/@payloadcms/ui/dist/exports/client/chunk-QJ5EJH4V.js:97:21)
    at Uu (webpack-internal:///(app-pages-browser)/./node_modules/@payloadcms/ui/dist/exports/client/index.js:3358:21)
    at zu (webpack-internal:///(app-pages-browser)/./node_modules/@payloadcms/ui/dist/exports/client/index.js:3171:21)
    at Ru (webpack-internal:///(app-pages-browser)/./node_modules/@payloadcms/ui/dist/exports/client/index.js:1991:24)
    at Yu (webpack-internal:///(app-pages-browser)/./node_modules/@payloadcms/ui/dist/exports/client/index.js:3435:21)
    at gu (webpack-internal:///(app-pages-browser)/./node_modules/@payloadcms/ui/dist/exports/client/index.js:20481:21)
    at bF (webpack-internal:///(app-pages-browser)/./node_modules/@payloadcms/ui/dist/exports/client/index.js:3917:24)
    at o6 (webpack-internal:///(app-pages-browser)/./node_modules/@payloadcms/ui/dist/exports/client/chunk-WDFUZ6GL.js:16912:21)
    at pg (webpack-internal:///(app-pages-browser)/./node_modules/@payloadcms/ui/dist/exports/client/index.js:20370:21)
    at kf (webpack-internal:///(app-pages-browser)/./node_modules/@payloadcms/ui/dist/exports/client/index.js:17688:21)
    at sd (webpack-internal:///(app-pages-browser)/./node_modules/@payloadcms/ui/dist/exports/client/index.js:3728:21)
    at Xu (webpack-internal:///(app-pages-browser)/./node_modules/@payloadcms/ui/dist/exports/client/index.js:3064:21)
    at GV (webpack-internal:///(app-pages-browser)/./node_modules/@payloadcms/ui/dist/exports/client/chunk-WDFUZ6GL.js:16882:21)
    at aB (webpack-internal:///(app-pages-browser)/./node_modules/@payloadcms/ui/dist/exports/client/index.js:20617:21)
    at body
    at html
    at RootLayout (Server)
    at Layout (Server)
    at InnerLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:248:11)
    at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:74:9)
    at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:82:11)
    at NotFoundErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:76:9)
    at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:84:11)
    at LoadingBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:355:11)
    at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:160:11)
    at InnerScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:158:9)
    at ScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:233:11)
    at RenderFromTemplateContext (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/render-from-template-context.js:16:44)
    at OuterLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:376:11)
    at RootLayout (Server)
    at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:74:9)
    at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:82:11)
    at NotFoundErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:76:9)
    at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:84:11)
    at DevRootNotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/dev-root-not-found-boundary.js:33:11)
    at ReactDevOverlay (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/app/ReactDevOverlay.js:87:9)
    at HotReload (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/app/hot-reloader-client.js:321:11)
    at Router (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:207:11)
    at ErrorBoundaryHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:113:9)
    at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:160:11)
    at AppRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:594:13)
    at ServerRoot (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:113:27)
    at Root (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:118:11)
    at ReactDevOverlay (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/app/ReactDevOverlay.js:87:9)

React will try to recreate this component tree from scratch using the error boundary you provided, ReactDevOverlay.

Reproduction Steps

  1. Create a Payload + Next.js project using Payload 3.0.0-beta.68 and Next.js 15.0.0-rc.0.
  2. Use a rich text field with lexical (editor: lexicalEditor() in payload.config.ts.
  3. Receive an error - not present on the previous version (3.0.0-beta-67).

Adapters and Plugins

richtext-lexical, db-mongodb

AlessioGr commented 2 months ago

Next.js 15.0.0-rc.0 is not supported in the latest beta. Please use 15.0.0-canary.58, that should fix it

alsherif-khalaf commented 2 months ago

Next.js 15.0.0-rc.0 is not supported in the latest beta. Please use 15.0.0-canary.58, that should fix it

what if I want to use latest next.js version ▲ Next.js 14.2.5 not canary ?

⨯ Error: Unsupported Server Component type: {...}
    at stringify (<anonymous>)
    at stringify (<anonymous>)
    at stringify (<anonymous>)
AlessioGr commented 2 months ago

what if I want to use latest next.js version ▲ Next.js 14.2.5 not canary ?

We don't support Next.js 14 in the latest beta. I'd either use an older beta version which still supports it, or migrate to Next.js 15 & React 19

maclong9 commented 1 month ago

@AlessioGr Any idea when support for the rc will be available or are you waiting until that version of next is in full release?

AlessioGr commented 1 month ago

We're waiting for a full release of Next and React

github-actions[bot] commented 3 weeks ago

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