Skip to content

ConfigSync component crashes all admin pages with React 19 #17095

Open

Description

@treerunner

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

Activity

  1. added
    status: needs-triagePossible bug which hasn't been reproduced yet
    validate-reproductionAuto-added tag on create to tell bot to check recreation URL, removed after check.
    on Jun 23, 2026
  2. added
    area: uiRelated to the admin panel.
    and removed
    validate-reproductionAuto-added tag on create to tell bot to check recreation URL, removed after check.
    on Jun 23, 2026
  3. github-actions commented on Jun 23, 2026

    @github-actions
    Contributor

    Please add a reproduction in order for us to be able to investigate.

    Depending on the quality of reproduction steps, this issue may be closed if no reproduction is provided.

    Why was this issue marked with the invalid-reproduction label?

    To be able to investigate, we need access to a reproduction to identify what triggered the issue. We prefer a link to a public GitHub repository created with create-payload-app@latest -t blank or a forked/branched version of this repository with tests added (more info in the reproduction-guide).

    To make sure the issue is resolved as quickly as possible, please make sure that the reproduction is as minimal as possible. This means that you should remove unnecessary code, files, and dependencies that do not contribute to the issue. Ensure your reproduction does not depend on secrets, 3rd party registries, private dependencies, or any other data that cannot be made public. Avoid a reproduction including a whole monorepo (unless relevant to the issue). The easier it is to reproduce the issue, the quicker we can help.

    Please test your reproduction against the latest version of Payload to make sure your issue has not already been fixed.

    I added a link, why was it still marked?

    Ensure the link is pointing to a codebase that is accessible (e.g. not a private repository). "example.com", "n/a", "will add later", etc. are not acceptable links -- we need to see a public codebase. See the above section for accepted links.

    Useful Resources

  4. r1tsuu commented on Jun 30, 2026

    @r1tsuu
    Member

    Hello @treerunner, I didn't find any ConfigSync component in our source code. Can you elaborate on that and could you provide a reproduction repo? A new project with create-payload-app with Postgres works fine for me.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions