I'm running a next.js site with Payload CMS backend and am having some issues. Can anyone help with why this auth destructuring issue is occurring?

I see that auth is related to the JTW identification methods.

Error: Cannot destructure property 'auth' of 'undefined' as it is undefined.
    at eval (rsc://React/Server/webpack-internal:///(rsc)/./payload.config.ts?0:24:118)
    at (rsc)/./payload.config.ts (rsc://React/Server/file:///Users/timbarnsley/Desktop/eutopias-magazine/.next/server/app/(payload)/admin/%5B%5B...segments%5D%5D/page.js?1:882:1)
    at __webpack_require__ (rsc://React/Server/file:///Users/timbarnsley/Desktop/eutopias-magazine/.next/server/webpack-runtime.js?2:33:43)
    at eval (rsc://React/Server/webpack-internal:///(rsc)/./app/(payload)/layout.tsx?3:11:73)
    at (rsc)/./app/(payload)/layout.tsx (rsc://React/Server/file:///Users/timbarnsley/Desktop/eutopias-magazine/.next/server/app/(payload)/admin/%5B%5B...segments%5D%5D/page.js?4:684:1)
    at Function.__webpack_require__ (rsc://React/Server/file:///Users/timbarnsley/Desktop/eutopias-magazine/.next/server/webpack-runtime.js?5:33:43)
    at resolveErrorDev (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]/node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js:1792:63)
    at processFullStringRow (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]/node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js:2071:17)
    at processFullBinaryRow (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]/node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js:2059:7)
    at progress (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]/node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js:2262:17)

Here is the payload.config.ts

import sharp from 'sharp'
import { lexicalEditor } from '@payloadcms/richtext-lexical'
import { postgresAdapter} from "@payloadcms/db-postgres";
import { buildConfig } from 'payload'
import path from "path"
import { vercelBlobAdapter } from "./adapters/vercel-blob-adapter"
import { Categories } from './collections/Categories'
import { Media } from './collections/Media'
import { Pages } from '@/collections/Pages'
import { Posts } from './collections/Posts'
import { Users } from './collections/Users'



export default buildConfig({
    // If you'd like to use Rich Text, pass your editor here
    editor: lexicalEditor(),

    // Define and configure your collections in this array
    collections: [Pages, Posts, Media, Categories, Users],

    // Your Payload secret - should be a complex and secure string, unguessable
    secret: process.env.PAYLOAD_SECRET || '',
    // Whichever Database Adapter you're using should go here
    // Mongoose is shown as an example, but you can also use Postgres
    db: postgresAdapter({
        // Postgres-specific arguments go here.
        // `pool` is required.
        pool: {
            connectionString: process.env.POSTGRES_URL,
        },
    }),
    // If you want to resize images, crop, set focal point, etc.
    // make sure to install it and pass it to the config.
    // This is optional - if you don't need to do these things,
    // you don't need it!
    sharp,
})

I'm running a next.js site with Payload CMS backend and am having some issues. Can anyone help with why this auth destructuring issue is occurring?

I see that auth is related to the JTW identification methods.

Error: Cannot destructure property 'auth' of 'undefined' as it is undefined.
    at eval (rsc://React/Server/webpack-internal:///(rsc)/./payload.config.ts?0:24:118)
    at (rsc)/./payload.config.ts (rsc://React/Server/file:///Users/timbarnsley/Desktop/eutopias-magazine/.next/server/app/(payload)/admin/%5B%5B...segments%5D%5D/page.js?1:882:1)
    at __webpack_require__ (rsc://React/Server/file:///Users/timbarnsley/Desktop/eutopias-magazine/.next/server/webpack-runtime.js?2:33:43)
    at eval (rsc://React/Server/webpack-internal:///(rsc)/./app/(payload)/layout.tsx?3:11:73)
    at (rsc)/./app/(payload)/layout.tsx (rsc://React/Server/file:///Users/timbarnsley/Desktop/eutopias-magazine/.next/server/app/(payload)/admin/%5B%5B...segments%5D%5D/page.js?4:684:1)
    at Function.__webpack_require__ (rsc://React/Server/file:///Users/timbarnsley/Desktop/eutopias-magazine/.next/server/webpack-runtime.js?5:33:43)
    at resolveErrorDev (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]/node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js:1792:63)
    at processFullStringRow (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]/node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js:2071:17)
    at processFullBinaryRow (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]/node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js:2059:7)
    at progress (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]/node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js:2262:17)

Here is the payload.config.ts

import sharp from 'sharp'
import { lexicalEditor } from '@payloadcms/richtext-lexical'
import { postgresAdapter} from "@payloadcms/db-postgres";
import { buildConfig } from 'payload'
import path from "path"
import { vercelBlobAdapter } from "./adapters/vercel-blob-adapter"
import { Categories } from './collections/Categories'
import { Media } from './collections/Media'
import { Pages } from '@/collections/Pages'
import { Posts } from './collections/Posts'
import { Users } from './collections/Users'



export default buildConfig({
    // If you'd like to use Rich Text, pass your editor here
    editor: lexicalEditor(),

    // Define and configure your collections in this array
    collections: [Pages, Posts, Media, Categories, Users],

    // Your Payload secret - should be a complex and secure string, unguessable
    secret: process.env.PAYLOAD_SECRET || '',
    // Whichever Database Adapter you're using should go here
    // Mongoose is shown as an example, but you can also use Postgres
    db: postgresAdapter({
        // Postgres-specific arguments go here.
        // `pool` is required.
        pool: {
            connectionString: process.env.POSTGRES_URL,
        },
    }),
    // If you want to resize images, crop, set focal point, etc.
    // make sure to install it and pass it to the config.
    // This is optional - if you don't need to do these things,
    // you don't need it!
    sharp,
})

• next.js
• payload-cms

1 Answer 1

Most probably process.env.PAYLOAD_SECRET is not set.