search

payloadcms / payload-3.0-demo

The official demo for Payload 3.0
https://next-payload-3-0-test.vercel.app
433 stars 140 forks source link

ERROR: TypeError: Cannot destructure property 'collectionSlug' of 'reqData' as it is undefined. #195

Closed lctone closed 4 months ago

lctone commented 4 months ago

An error appears when I am using Admin Panel

ERROR: TypeError: Cannot destructure property 'collectionSlug' of 'reqData' as it is undefined.
    at Object.buildFormState [as form-state] (webpack-internal:///(rsc)/./node_modules/.pnpm/@payloadcms+next@3.0.0-beta.26_@types+react@18.3.1_graphql@16.8.1_monaco-editor@0.48.0_next@1_e65qgalkomizeqhefy3nyfezmm/node_modules/@payloadcms/next/dist/routes/rest/buildFormState.js:35:17)
    at eval (webpack-internal:///(rsc)/./node_modules/.pnpm/@payloadcms+next@3.0.0-beta.26_@types+react@18.3.1_graphql@16.8.1_monaco-editor@0.48.0_next@1_e65qgalkomizeqhefy3nyfezmm/node_modules/@payloadcms/next/dist/routes/rest/index.js:537:55)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async D:\payload\school\sonaedu\node_modules\.pnpm\next@14.3.0-canary.51_react-dom@18.3.1_react@18.3.1\node_modules\next\dist\compiled\next-server\app-route.runtime.dev.js:6:51372
    at async e_.execute (D:\payload\school\sonaedu\node_modules\.pnpm\next@14.3.0-canary.51_react-dom@18.3.1_react@18.3.1\node_modules\next\dist\compiled\next-server\app-route.runtime.dev.js:6:42605)       
    at async e_.handle (D:\payload\school\sonaedu\node_modules\.pnpm\next@14.3.0-canary.51_react-dom@18.3.1_react@18.3.1\node_modules\next\dist\compiled\next-server\app-route.runtime.dev.js:6:52706)        
    at async doRender (D:\payload\school\sonaedu\node_modules\.pnpm\next@14.3.0-canary.51_react-dom@18.3.1_react@18.3.1\node_modules\next\dist\server\base-server.js:1379:42)
    at async responseGenerator (D:\payload\school\sonaedu\node_modules\.pnpm\next@14.3.0-canary.51_react-dom@18.3.1_react@18.3.1\node_modules\next\dist\server\base-server.js:1593:40)
    at async DevServer.renderToResponseWithComponentsImpl (D:\payload\school\sonaedu\node_modules\.pnpm\next@14.3.0-canary.51_react-dom@18.3.1_react@18.3.1\node_modules\next\dist\server\base-server.js:1618:28)
    at async DevServer.renderPageComponent (D:\payload\school\sonaedu\node_modules\.pnpm\next@14.3.0-canary.51_react-dom@18.3.1_react@18.3.1\node_modules\next\dist\server\base-server.js:1931:24)
    at async DevServer.renderToResponseImpl (D:\payload\school\sonaedu\node_modules\.pnpm\next@14.3.0-canary.51_react-dom@18.3.1_react@18.3.1\node_modules\next\dist\server\base-server.js:1969:32)
    at async DevServer.pipeImpl (D:\payload\school\sonaedu\node_modules\.pnpm\next@14.3.0-canary.51_react-dom@18.3.1_react@18.3.1\node_modules\next\dist\server\base-server.js:902:25)
    at async NextNodeServer.handleCatchallRenderRequest (D:\payload\school\sonaedu\node_modules\.pnpm\next@14.3.0-canary.51_react-dom@18.3.1_react@18.3.1\node_modules\next\dist\server\next-server.js:273:17)
    at async DevServer.handleRequestImpl (D:\payload\school\sonaedu\node_modules\.pnpm\next@14.3.0-canary.51_react-dom@18.3.1_react@18.3.1\node_modules\next\dist\server\base-server.js:798:17)
    at async D:\payload\school\sonaedu\node_modules\.pnpm\next@14.3.0-canary.51_react-dom@18.3.1_react@18.3.1\node_modules\next\dist\server\dev\next-dev-server.js:339:20
    at async Span.traceAsyncFn (D:\payload\school\sonaedu\node_modules\.pnpm\next@14.3.0-canary.51_react-dom@18.3.1_react@18.3.1\node_modules\next\dist\trace\trace.js:157:20)
    at async DevServer.handleRequest (D:\payload\school\sonaedu\node_modules\.pnpm\next@14.3.0-canary.51_react-dom@18.3.1_react@18.3.1\node_modules\next\dist\server\dev\next-dev-server.js:336:24)
    at async invokeRender (D:\payload\school\sonaedu\node_modules\.pnpm\next@14.3.0-canary.51_react-dom@18.3.1_react@18.3.1\node_modules\next\dist\server\lib\router-server.js:174:21)
    at async handleRequest (D:\payload\school\sonaedu\node_modules\.pnpm\next@14.3.0-canary.51_react-dom@18.3.1_react@18.3.1\node_modules\next\dist\server\lib\router-server.js:353:24)
    at async requestHandlerImpl (D:\payload\school\sonaedu\node_modules\.pnpm\next@14.3.0-canary.51_react-dom@18.3.1_react@18.3.1\node_modules\next\dist\server\lib\router-server.js:377:13)
    at async Server.requestListener (D:\payload\school\sonaedu\node_modules\.pnpm\next@14.3.0-canary.51_react-dom@18.3.1_react@18.3.1\node_modules\next\dist\server\lib\start-server.js:142:13)

Payload3Beta26

jmikrut commented 4 months ago

Hey @lctone we will need a reproduction to be able to help with this. It sounds like something related to your setup, but it should be easy to find once we know what it is in your setup that is causing it.

Can you provide us with a minimal way to reproduce this?

erickreutz commented 4 months ago

Seeing this error as well

JoseAlbDR commented 4 months ago

Same error here:

EDIT: just uploaded code to Repo URL

src/collections/Media.ts

import { CollectionConfig } from 'payload/types';

export const Media: CollectionConfig = {
  slug: 'media',
  labels: {
    singular: 'Media',
    plural: 'Media',
  },
  access: {
    read: () => true,
  },
  upload: true,
  fields: [
    {
      name: 'alt',
      label: 'Alt',
      type: 'text',
    },
  ],
};

src/collections/Pages.ts

import { CollectionConfig } from 'payload/types';
import { Hero } from '../blocks';

export const Pages: CollectionConfig = {
  slug: 'pages',
  labels: {
    singular: 'Page',
    plural: 'Pages',
  },
  access: {
    read: () => true,
  },
  fields: [
    {
      name: 'name',
      label: 'Name',
      type: 'text',
      required: true,
    },
    {
      name: 'slug',
      label: 'Slug',
      type: 'text',
      required: true,
    },
    {
      name: 'layout',
      label: 'Layout',
      type: 'blocks',
      blocks: [Hero],
    },
  ],
};

src/payload.config.ts

import { mongooseAdapter } from '@payloadcms/db-mongodb';
// import { payloadCloud } from '@payloadcms/plugin-cloud'
import { lexicalEditor } from '@payloadcms/richtext-lexical';
import path from 'path';
import { buildConfig } from 'payload/config';
// import sharp from 'sharp'
import { fileURLToPath } from 'url';

import { Users } from './collections/Users';
import { Media, Pages } from './collections';

const filename = fileURLToPath(import.meta.url);
const dirname = path.dirname(filename);

export default buildConfig({
  admin: {
    user: Users.slug,
  },
  collections: [Users, Pages, Media],
  editor: lexicalEditor({}),
  // plugins: [payloadCloud()], // TODO: Re-enable when cloud supports 3.0
  secret: process.env.PAYLOAD_SECRET || '',
  localization: {
    locales: [
      {
        label: {
          en: 'English',
          es: 'Inglés',
        },
        code: 'en',
      },
      {
        label: {
          en: 'Spanish',
          es: 'Español',
        },
        code: 'es',
      },
    ],
    defaultLocale: 'es',
    fallback: true,
  },
  typescript: {
    outputFile: path.resolve(dirname, 'payload-types.ts'),
  },
  db: mongooseAdapter({
    url: process.env.DATABASE_URI || '',
  }),

  // Sharp is now an optional dependency -
  // if you want to resize images, crop, set focal point, etc.
  // make sure to install it and pass it to the config.

  // This is temporary - we may make an adapter pattern
  // for this before reaching 3.0 stable

  // sharp,
});

package.json

{
  "name": "aula-de-laura",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@payloadcms/db-mongodb": "^3.0.0-beta.28",
    "@payloadcms/next": "^3.0.0-beta.28",
    "@payloadcms/richtext-lexical": "^3.0.0-beta.28",
    "next": "14.3.0-canary.28",
    "payload": "^3.0.0-beta.28",
    "react": "^18",
    "react-dom": "^18"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "eslint": "^8",
    "eslint-config-next": "14.3.0-canary.28",
    "postcss": "^8",
    "tailwindcss": "^3.4.1",
    "typescript": "^5"
  }
}

Steps: npx create-next-app@14.3.0-canary.28 Follow config

npx create-payload-app@beta Follow config

Create Pages and Media collections. Import Pages and Media into collections array in payload.config

npm run dev http://localhost:3000/admin Log In Click on Media Collection, and get the error:

[18:51:27] ERROR: TypeError: Cannot destructure property 'collectionSlug' of 'reqData' as it is undefined.
    at Object.buildFormState [as form-state] (webpack-internal:///(rsc)/./node_modules/@payloadcms/next/dist/routes/rest/buildFormState.js:35:17)
    at eval (webpack-internal:///(rsc)/./node_modules/@payloadcms/next/dist/routes/rest/index.js:537:55)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async C:\Users\berti\OneDrive\Documentos\Programacion\FULL STACK\JJTEAM\landing-laura-payload\aula-de-laura\node_modules\next\dist\compiled\next-server\app-route.runtime.dev.js:6:53812
    at async e_.execute (C:\Users\berti\OneDrive\Documentos\Programacion\FULL STACK\JJTEAM\landing-laura-payload\aula-de-laura\node_modules\next\dist\compiled\next-server\app-route.runtime.dev.js:6:45047)  
    at async e_.handle (C:\Users\berti\OneDrive\Documentos\Programacion\FULL STACK\JJTEAM\landing-laura-payload\aula-de-laura\node_modules\next\dist\compiled\next-server\app-route.runtime.dev.js:6:55066)   
    at async doRender (C:\Users\berti\OneDrive\Documentos\Programacion\FULL STACK\JJTEAM\landing-laura-payload\aula-de-laura\node_modules\next\dist\server\base-server.js:1364:42)
    at async cacheEntry.responseCache.get.routeKind (C:\Users\berti\OneDrive\Documentos\Programacion\FULL STACK\JJTEAM\landing-laura-payload\aula-de-laura\node_modules\next\dist\server\base-server.js:1578:40)
    at async DevServer.renderToResponseWithComponentsImpl (C:\Users\berti\OneDrive\Documentos\Programacion\FULL STACK\JJTEAM\landing-laura-payload\aula-de-laura\node_modules\next\dist\server\base-server.js:1498:28)
    at async DevServer.renderPageComponent (C:\Users\berti\OneDrive\Documentos\Programacion\FULL STACK\JJTEAM\landing-laura-payload\aula-de-laura\node_modules\next\dist\server\base-server.js:1915:24)       
    at async DevServer.renderToResponseImpl (C:\Users\berti\OneDrive\Documentos\Programacion\FULL STACK\JJTEAM\landing-laura-payload\aula-de-laura\node_modules\next\dist\server\base-server.js:1953:32)      
    at async DevServer.pipeImpl (C:\Users\berti\OneDrive\Documentos\Programacion\FULL STACK\JJTEAM\landing-laura-payload\aula-de-laura\node_modules\next\dist\server\base-server.js:900:25)
    at async NextNodeServer.handleCatchallRenderRequest (C:\Users\berti\OneDrive\Documentos\Programacion\FULL STACK\JJTEAM\landing-laura-payload\aula-de-laura\node_modules\next\dist\server\next-server.js:272:17)
    at async DevServer.handleRequestImpl (C:\Users\berti\OneDrive\Documentos\Programacion\FULL STACK\JJTEAM\landing-laura-payload\aula-de-laura\node_modules\next\dist\server\base-server.js:796:17)
    at async C:\Users\berti\OneDrive\Documentos\Programacion\FULL STACK\JJTEAM\landing-laura-payload\aula-de-laura\node_modules\next\dist\server\dev\next-dev-server.js:339:20
    at async Span.traceAsyncFn (C:\Users\berti\OneDrive\Documentos\Programacion\FULL STACK\JJTEAM\landing-laura-payload\aula-de-laura\node_modules\next\dist\trace\trace.js:154:20)
    at async DevServer.handleRequest (C:\Users\berti\OneDrive\Documentos\Programacion\FULL STACK\JJTEAM\landing-laura-payload\aula-de-laura\node_modules\next\dist\server\dev\next-dev-server.js:336:24)      
    at async invokeRender (C:\Users\berti\OneDrive\Documentos\Programacion\FULL STACK\JJTEAM\landing-laura-payload\aula-de-laura\node_modules\next\dist\server\lib\router-server.js:174:21)
    at async handleRequest (C:\Users\berti\OneDrive\Documentos\Programacion\FULL STACK\JJTEAM\landing-laura-payload\aula-de-laura\node_modules\next\dist\server\lib\router-server.js:353:24)
    at async requestHandlerImpl (C:\Users\berti\OneDrive\Documentos\Programacion\FULL STACK\JJTEAM\landing-laura-payload\aula-de-laura\node_modules\next\dist\server\lib\router-server.js:377:13)
    at async Server.requestListener (C:\Users\berti\OneDrive\Documentos\Programacion\FULL STACK\JJTEAM\landing-laura-payload\aula-de-laura\node_modules\next\dist\server\lib\start-server.js:142:13)
 POST /api/form-state 200 in 121ms
 GET /admin/collections/media/create?_rsc=1oiw3 200 in 198ms

error

Tried to upload a image and it wont upload to "url": "/api/media/file/fondo-rojo.svg", as API says, the folder media just doesnt exist.

error2 error3 error4

Hope it helps.

JessChowdhury commented 4 months ago

This only seems to happen on Next version 14.3.0-canary.28, I tested with the repro provided by @JoseAlbDR.

PR here from a related issue.

lctone commented 4 months ago

@JessChowdhury its still error when reload page. I tested with 14.3.0-canary.37 and postgres

erickreutz commented 4 months ago

I'm seeing this on 14.2.3

jmikrut commented 4 months ago

@lctone and @erickreutz just to be clear, you are seeing this even after updating to Next.js 14.3.0-canary.3?

I just tested and was consistently reproducing, but as Jess said, the newest canary fixed it. I think this is a Next.js canary problem instead of a Payload problem, but we'll continue to keep an eye on it.

Also, it's just a development problem with reactStrictMode: true (the default Next.js setting).

For some background info, we build form state in an effect, but with React strict mode, effects in development always run twice even if nothing changes.

See here: https://stackoverflow.com/questions/72238175/why-useeffect-running-twice-and-how-to-handle-it-well-in-react

We are handling this the proper way, by aborting the first fetch that is made and allowing the second to proceed. So nothing is broken, but maybe Next.js is changing how they are bailing out of requests if they are aborted in canary versions at the moment.

TL;DR - this appears to be a Next issue, and updating to the most recent canary should solve it for everyone. And the error in the terminal doesn't cause any real problems - it's just annoying.

Will continue to monitor!