payloadcms / payloadcms/payload

ConfigSync component crashes all admin pages with React 19

Open Beginner friendly
#17,095 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

area: ui invalid-reproduction status: needs-triage v3
Dominant language
TypeScript
Stars
44.8k
Forks
4.2k
Avg merge
2d 21h
Merged PRs (30d)
53

Description

Describe the Bug

In @payloadcms/ui, there's a ConfigSync component (mangled to Tn in the compiled output) that reads Payload's config from React context. It does:

const { config, setConfig } = useConfigContext() // returns undefined if no provider above it
React context with no provider returns the default value — in this case undefined. The component then immediately destructures undefined, which throws a TypeError. This crashes every admin page including login, because ConfigSync is used at a level where the ConfigProvider hasn't been established yet.

Why it's a React 19 issue specifically:

Payload v3 migrated to React 19 and its new use(Context) hook, along with the React compiler. The compiled output uses use(ConfigContext) instead of useContext(ConfigContext). The component was apparently never tested in the code path where the context provider wasn't an ancestor — which React 19 + this specific admin route structure exposed.

The fix is three lines:

se() || {} // guard the destructuring
i && i(n) // guard the effect callback
o?.unauthenticated // guard the property access
Yes, report it. The Payload repo is at github.com/payloadcms/payload. The useful details to include:

Error: TypeError: Cannot destructure property 'config' of 'se(...)' as it is undefined
Affected pages: /admin/login, /admin/create-first-user
The patch (just the three-line fix above) as a suggested resolution

Link to the code that reproduces this issue

na

Reproduction Steps

Steps to reproduce

  1. Scaffold a new Payload v3 project with create-payload-app, accepting the default React 19 / Next.js 15 versions
  2. Configure a Postgres database and set PAYLOAD_SECRET
  3. Run next dev and navigate to /admin
  4. Observe a 500 error — the page fails to render with:

TypeError: Cannot destructure property 'config' of 'se(...)' as it is undefined.
at Tn (@payloadcms/ui/dist/exports/client/chunk-2GZJJKQF.js)
This affects /admin/login, /admin/create-first-user, and all other admin routes. The admin is completely inaccessible.

Root cause

The ConfigSync component (Tn in compiled output) in @payloadcms/ui calls use(ConfigContext) and immediately destructures the result without guarding against undefined:

// current — crashes when context has no provider ancestor
const { config, setConfig } = se() // se() = use(ConfigContext), returns undefined

// fix
const { config, setConfig } = se() || {}
Two additional guards are needed in the same component:

c = () => { i && i(n) } // guard effect callback when setConfig is undefined
o?.unauthenticated // guard property access when config is undefined
Expected: Admin pages render normally

Actual: All admin pages crash with a TypeError before any content renders

Which area(s) are affected?

area: ui

Environment Info
Payload: 3.85.1
React: 19.2.7
Next.js: 15.4.11
Node: >=20

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the failure on /admin/login or /admin/create-first-user with Payload 3.85.1, then locate ConfigSync in @payloadcms/ui corresponding to the compiled chunk-2GZJJKQF.js output. Check the context destructuring, effect callback, and unauthenticated property access described in the report; done means the admin routes render without the TypeError.

Written by the indexing model from the issue text.

Assessment

Tech stack
next.js, react, typescript
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
65/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.