Upgrading from 2.0.10 to >= 2.0.11 introduces a type error which appears to be related to the text field??

[jakehopking]

Link to reproduction

No response

Describe the Bug

All is working correctly in 2.0.10. All version above this (tried up to latest 2.2.1) maintain this introduced error.

I have no idea how to fix or why this has happened. My front-end is dead, and the collection queries within payload's admin are also screwed, suggesting this is deeper problem.

Here is the terminal error (see end of report for screenshot of network error from admin ui):

yarn run v1.22.19
$ cross-env NODE_ENV=development PAYLOAD_CONFIG_PATH=src/payload.config.ts ts-node src/dev.ts
[10:45:53] INFO (payload): Connected to MongoDB server successfully!
[10:45:53] INFO (payload): Starting Payload...
[10:45:53] INFO (payload): Payload Admin URL: http://10.0.1.236:3000/admin
Server listening on 3000...
 ○ compiling /[...slug] ...
webpack built 781d5c02f208788ab590 in 11736ms
WARNING in ./src/lib/payload.ts 226:16-28
export 'default' (imported as 'payload') was not found in 'payload' (possible exports: __esModule, webpackBundler)

WARNING in ./src/lib/payload.ts 257:16-28
export 'default' (imported as 'payload') was not found in 'payload' (possible exports: __esModule, webpackBundler)

WARNING in ./src/lib/payload.ts 288:16-28
export 'default' (imported as 'payload') was not found in 'payload' (possible exports: __esModule, webpackBundler)

WARNING in ./src/lib/payload.ts 308:16-34
export 'default' (imported as 'payload') was not found in 'payload' (possible exports: __esModule, webpackBundler)

WARNING in ./src/lib/payload.ts 365:24-40
export 'default' (imported as 'payload') was not found in 'payload' (possible exports: __esModule, webpackBundler)

WARNING in ./src/lib/payload.ts 410:35-51
export 'default' (imported as 'payload') was not found in 'payload' (possible exports: __esModule, webpackBundler)

WARNING in ./src/lib/payload.ts 700:24-36
export 'default' (imported as 'payload') was not found in 'payload' (possible exports: __esModule, webpackBundler)

WARNING in ./src/lib/payload.ts 733:24-36
export 'default' (imported as 'payload') was not found in 'payload' (possible exports: __esModule, webpackBundler)

webpack compiled with 8 warnings
 ✓ Compiled /[...slug] in 6.3s (1084 modules)
[BABEL] Note: The code generator has deoptimised the styling of /Users/jake/Development/personal/elkliandhart.com/.next/server/vendor-chunks/next.js as it exceeds the max of 500KB.
[BABEL] Note: The code generator has deoptimised the styling of /Users/jake/Development/personal/elkliandhart.com/.next/server/pages/_app.js as it exceeds the max of 500KB.
[BABEL] Note: The code generator has deoptimised the styling of /Users/jake/Development/personal/elkliandhart.com/.next/server/pages/[...slug].js as it exceeds the max of 500KB.
 X src/pages/_app.tsx (220:29) @ map
 X TypeError: Cannot read properties of undefined (reading 'map')
    at eval (webpack-internal:///./src/pages/_app.tsx:250:36)
    at processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Promise.all (index 3)
    at async Function.MyApp.getInitialProps (webpack-internal:///./src/pages/_app.tsx:182:81)
    at async s (/Users/jake/Development/personal/elkliandhart.com/node_modules/next/dist/compiled/next-server/pages.runtime.dev.js:1:32573)
    at async We (/Users/jake/Development/personal/elkliandhart.com/node_modules/next/dist/compiled/next-server/pages.runtime.dev.js:1:55076)
    at async doRender (/Users/jake/Development/personal/elkliandhart.com/node_modules/next/src/server/base-server.ts:2107:18)
    at async cacheEntry.responseCache.get.incrementalCache.incrementalCache (/Users/jake/Development/personal/elkliandhart.com/node_modules/next/src/server/base-server.ts:2366:24)
    at async /Users/jake/Development/personal/elkliandhart.com/node_modules/next/src/server/response-cache/index.ts:129:28 {
  page: '/_next/webpack-hmr'
}
  218 |         return {
  219 |           ...journal,
> 220 |           docs: journal.docs.map((doc: JournalType) => {
      |                             ^
  221 |             // Remove these, spread the ...rest back into the object.
  222 |             const { layout, ...rest } = doc || {};
  223 |             return {
[10:46:09] ERROR (payload): TypeError: Cannot read properties of undefined (reading 'payload')
    at forEach (/Users/jake/Development/personal/elkliandhart.com/node_modules/@payloadcms/richtext-slate/src/data/richTextRelationshipPromise.ts:38:32)
    at Array.forEach (<anonymous>)
    at recurseRichText (/Users/jake/Development/personal/elkliandhart.com/node_modules/@payloadcms/richtext-slate/src/data/richTextRelationshipPromise.ts:36:26)
    at richTextRelationshipPromise (/Users/jake/Development/personal/elkliandhart.com/node_modules/@payloadcms/richtext-slate/src/data/richTextRelationshipPromise.ts:136:3)
    at Object.afterReadPromise (/Users/jake/Development/personal/elkliandhart.com/node_modules/@payloadcms/richtext-slate/src/index.ts:37:43)
    at promise (/Users/jake/Development/personal/elkliandhart.com/node_modules/payload/src/fields/hooks/afterRead/promise.ts:157:42)
    at forEach (/Users/jake/Development/personal/elkliandhart.com/node_modules/payload/src/fields/hooks/afterRead/traverseFields.ts:45:14)
    at Array.forEach (<anonymous>)
    at traverseFields (/Users/jake/Development/personal/elkliandhart.com/node_modules/payload/src/fields/hooks/afterRead/traverseFields.ts:43:10)
    at promise (/Users/jake/Development/personal/elkliandhart.com/node_modules/payload/src/fields/hooks/afterRead/promise.ts:418:21)
    at forEach (/Users/jake/Development/personal/elkliandhart.com/node_modules/payload/src/fields/hooks/afterRead/traverseFields.ts:45:14)
    at Array.forEach (<anonymous>)
    at traverseFields (/Users/jake/Development/personal/elkliandhart.com/node_modules/payload/src/fields/hooks/afterRead/traverseFields.ts:43:10)
    at promise (/Users/jake/Development/personal/elkliandhart.com/node_modules/payload/src/fields/hooks/afterRead/promise.ts:280:21)
    at /Users/jake/Development/personal/elkliandhart.com/node_modules/payload/src/fields/hooks/afterRead/traverseFields.ts:45:14

Collections with errors (there are others, but these are indicative).

Collection working correctly

Please look into why this error has been introduced and not affecting others. Let me know what else I can supply to help you bugfix.

FYI @DanRibbens has access to this repo already (dev branch).

To Reproduce

Install version >=2.0.11 on my codebase.

Payload Version

Working is 2.0.10. Breaking is >= 2.0.11

Adapters and Plugins

db-mongodb, stripePlugin, webpackBundler, slateEditor

[MarkAtOmniux]

Hi @jakehopking are you using a standalone Payload project or a Payload-Nextjs project?

The error seems to relate to this line in richTextRelationshipPromise;

 if ((element.type === 'relationship' || element.type === 'upload') && element?.value?.id) {
        const collection = req.payload.collections[element?.relationTo]
...

First can you start by isolating all of your richtext instances. Then, comment out any upload or relationship elements that you have included. It could either be an issue with the core relationship in the database, it could be an issue with the collection that is being used to generate the relationship, or it could be an issue with a duplicate install of payload in your node_modules causing a conflict.

[MarkAtOmniux]

@AlessioGr this looks like it's using slate, not lexical

[jakehopking]

Yes - @AlessioGr I'm using Slate (as mentioned in the Adapters and Plugins section).

@MarkAtOmniux - I've searched through my collections, and nowhere do I specify an upload or relationship prop on a type: 'richText' object. And yes, I'm running Payload and Next in one codebase.

I've been using Payload for over a year now, and this is the first time I've had a breaking issues with with the textField. I feel this is a bug introduced on Payload's side. How can we progress here?

I have upload or relationship enabled within my elements.ts:

import { RichTextElement } from '@payloadcms/richtext-slate';
import video from './video';
import pullQuote from './pullQuote';

export const defaultElements: RichTextElement[] = [
  'h1',
  'h2',
  'h3',
  'h4',
  'h5',
  'h6',
  'blockquote',
  pullQuote,
  'ul',
  'ol',
  'indent',
  'link',
  'relationship',
  'upload',
  video,
];

I also have abstracted richtext into a function, so I can selectively enable the custom elements/leaves etc.

Here's the code for that richText.ts:

import {
  RichTextElement,
  RichTextLeaf,
  slateEditor,
} from '@payloadcms/richtext-slate';
import { deepMerge } from '../../utilities/deepMerge';
import { defaultElements } from './elements';
import { defaultLeaves } from './leaves';
import { RichTextField } from 'payload/types';

type RichText = (
  overrides?: Partial<RichTextField>,
  additions?: {
    elements?: RichTextElement[];
    leaves?: RichTextLeaf[];
  },
) => RichTextField;

export const richText: RichText = (
  overrides,
  additions = {
    elements: [],
    leaves: [],
  },
) =>
  deepMerge<RichTextField, Partial<RichTextField>>(
    {
      name: 'richText',
      type: 'richText',
      required: true,
      editor: slateEditor({
        admin: {
          elements: [...defaultElements, ...(additions.elements || [])],
          leaves: [...defaultLeaves, ...(additions.leaves || [])],
        },
      }),
    },
    overrides,
  );

In some collections, I have disabled the relationship field (this was a workaround to an issue I had a while ago, and was suggested by @DanRibbens if I recall). Here's what I mean:

Category.ts

import { CollectionConfig } from 'payload/types';
import { slug } from '../fields';

export type CategoryType = {
  id?: string;
  title: string;
  slug: string;
};

const Category: CollectionConfig = {
  slug: 'categories',
  admin: {
    useAsTitle: 'title',
    defaultColumns: ['title', 'slug', 'id', 'createdAt', 'updatedAt'],
    enableRichTextRelationship: false,
    enableRichTextLink: false,
  },
  access: {
    read: () => true,
  },
  fields: [
    {
      name: 'title',
      label: 'Title',
      type: 'text',
      required: true,
    },
    slug(),
  ],
};

export { Category };

Does any of this code that relates to richText raise any concerns with you??

Thanks

[MarkAtOmniux]

defaultElements contains relationship elements. I would start by removing all of those and then adding them back in one at a time to see which is causing the issue

[jakehopking]

I will try this.

The more important question is what has changed between these two versions that could have caused this?

[MarkAtOmniux]

Yes of course, but by making these changes and adding them back in one by one, you should be able to narrow down what element is causing the issue. From there, we can take a look at the files affected and then look at the history of changes 😊

We won't know what caused the issue without a healthy dose of backtracking 😄

[jakehopking]

Nope - disabling all of these elements, I get the exact same error.

Rolling back to 2.0.10 with fresh install again (rm -rf node_modules etc) all is good.

Any other ideas?

elements.ts

import { RichTextElement } from '@payloadcms/richtext-slate';
import largeBody from './largeBody';
import label from './label';
import video from './video';
import pullQuote from './pullQuote';

export const defaultElements: RichTextElement[] = [
  // 'h1',
  // 'h2',
  // 'h3',
  // 'h4',
  // 'h5',
  // 'h6',
  // 'blockquote',
  // pullQuote,
  // 'ul',
  // 'ol',
  // 'indent',
  // 'link',
  // 'relationship',
  // 'upload',
  // video,
];

Error

[11:44:44] ERROR (payload): TypeError: Cannot read properties of undefined (reading 'payload')
    at forEach (/Users/jake/Development/personal/elkliandhart.com/node_modules/@payloadcms/richtext-slate/src/data/richTextRelationshipPromise.ts:38:32)
    at Array.forEach (<anonymous>)
    at recurseRichText (/Users/jake/Development/personal/elkliandhart.com/node_modules/@payloadcms/richtext-slate/src/data/richTextRelationshipPromise.ts:36:26)
    at richTextRelationshipPromise (/Users/jake/Development/personal/elkliandhart.com/node_modules/@payloadcms/richtext-slate/src/data/richTextRelationshipPromise.ts:136:3)
    at Object.afterReadPromise (/Users/jake/Development/personal/elkliandhart.com/node_modules/@payloadcms/richtext-slate/src/index.ts:37:43)
    at promise (/Users/jake/Development/personal/elkliandhart.com/node_modules/payload/src/fields/hooks/afterRead/promise.ts:157:42)
    at forEach (/Users/jake/Development/personal/elkliandhart.com/node_modules/payload/src/fields/hooks/afterRead/traverseFields.ts:45:14)
    at Array.forEach (<anonymous>)
    at traverseFields (/Users/jake/Development/personal/elkliandhart.com/node_modules/payload/src/fields/hooks/afterRead/traverseFields.ts:43:10)
    at promise (/Users/jake/Development/personal/elkliandhart.com/node_modules/payload/src/fields/hooks/afterRead/promise.ts:418:21)
    at forEach (/Users/jake/Development/personal/elkliandhart.com/node_modules/payload/src/fields/hooks/afterRead/traverseFields.ts:45:14)
    at Array.forEach (<anonymous>)
    at traverseFields (/Users/jake/Development/personal/elkliandhart.com/node_modules/payload/src/fields/hooks/afterRead/traverseFields.ts:43:10)
    at promise (/Users/jake/Development/personal/elkliandhart.com/node_modules/payload/src/fields/hooks/afterRead/promise.ts:280:21)
    at /Users/jake/Development/personal/elkliandhart.com/node_modules/payload/src/fields/hooks/afterRead/traverseFields.ts:45:14
 ⨯ src/pages/_app.tsx (220:29) @ map
 ⨯ TypeError: Cannot read properties of undefined (reading 'map')
    at eval (webpack-internal:///./src/pages/_app.tsx:250:36)
    at processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Promise.all (index 3)
    at async Function.MyApp.getInitialProps (webpack-internal:///./src/pages/_app.tsx:182:81)
    at async ea (webpack://next/./dist/esm/shared/lib/utils.js:73:19)
    at async e9 (webpack://next/./dist/esm/server/render.js:388:13)
    at async doRender (/Users/jake/Development/personal/elkliandhart.com/node_modules/next/src/server/base-server.ts:2311:20)
    at async cacheEntry.responseCache.get.routeKind (/Users/jake/Development/personal/elkliandhart.com/node_modules/next/src/server/base-server.ts:2593:24)
    at async DevServer.renderToResponseWithComponentsImpl (/Users/jake/Development/personal/elkliandhart.com/node_modules/next/src/server/base-server.ts:2450:24)
    at async DevServer.renderPageComponent (/Users/jake/Development/personal/elkliandhart.com/node_modules/next/src/server/base-server.ts:2979:16)
    at async DevServer.renderToResponseImpl (/Users/jake/Development/personal/elkliandhart.com/node_modules/next/src/server/base-server.ts:3039:24)
    at async DevServer.pipeImpl (/Users/jake/Development/personal/elkliandhart.com/node_modules/next/src/server/base-server.ts:1563:21)
    at async DevServer.NextNodeServer.handleCatchallRenderRequest (/Users/jake/Development/personal/elkliandhart.com/node_modules/next/src/server/next-server.ts:938:7)
    at async DevServer.handleRequestImpl (/Users/jake/Development/personal/elkliandhart.com/node_modules/next/src/server/base-server.ts:1348:9) {
  page: '/_next/webpack-hmr'
}
  218 |         return {
  219 |           ...journal,
> 220 |           docs: journal.docs.map((doc: JournalType) => {
      |                             ^
  221 |             // Remove these, spread the ...rest back into the object.
  222 |             const { layout, ...rest } = doc || {};
  223 |             return {
 ○ Compiling /_error ...
^C

[jakehopking]

@jmikrut — James I'd love your thoughts here 🙏

[MarkAtOmniux]

Did you also check for duplicate payload installs in your node modules? That's been happening more frequently recently

[jmikrut]

Hey @jakehopking I'm gonna jump on this right away with the team. At first blush I can't see anything that would have changed here causing this, but @DanRibbens and I will work together to try and recreate the issue immediately.

[jakehopking]

Did you also check for duplicate payload installs in your node modules? That's been happening more frequently recently

Checked, and no duplicates here.

Hey @jakehopking I'm gonna jump on this right away with the team. At first blush I can't see anything that would have changed here causing this, but @DanRibbens and I will work together to try and recreate the issue immediately.

Thanks @jmikrut — I hope you can help me to find the cause! I mentioned above @DanRibbens has access to this repo from long ago. If you checkout, then make sure to keep to main branch and restore the monogdb backup that's in the repo.

[DanRibbens]

I pulled down main on your project, ran yarn, updated env vars, etc. and webpack built successfully when I ran in dev.

Working version: Installed [email protected] Node version 21.3.0 yarn 1.22.21

Then I went back to 2.0.11 and tried to run but I hit some config validation errors that prevented Payload from starting. Now I've run 2.2.2 and it is looking good webpack compiled successfully.

Moving on to building, I found some other type error on a hook which I fixed and opened a PR in your repo.

Then I got three webpack errors:

ERROR in ./node_modules/next/dist/compiled/gzip-size/index.js 248:24-37
Module not found: Error: Can't resolve 'fs' in 'C:\code\elkli-and-hart\node_modules\next\dist\compiled\gzip-size'

ERROR in ./node_modules/next/dist/compiled/gzip-size/index.js 252:24-41
Module not found: Error: Can't resolve 'stream' in 'C:\code\elkli-and-hart\node_modules\next\dist\compiled\gzip-size'

ERROR in ./node_modules/next/dist/compiled/gzip-size/index.js 256:24-39
Module not found: Error: Can't resolve 'zlib' in 'C:\code\elkli-and-hart\node_modules\next\dist\compiled\gzip-size'

This is unrelated to the issue of course, you will need to alias these of course.

Let me know how else I can help here. Are you still getting the errors after updating to latest?

[jakehopking]

Thanks for taking the time to look into this (and for fixing the type error you found).

However I'm still completely stuck and confused how you managed to run my project, when I'm unable to 😞

@DanRibbens Did you run yarn dev:basic when you tried to run my project? This runs: cross-env NODE_ENV=development PAYLOAD_CONFIG_PATH=src/payload.config.ts ts-node src/dev.ts

I'm still in the exact same situation after updating to 2.3.0 with the same version of node you tried 21.3.0.

Here's the console error after trying completely fresh install of everything in a fresh nvm environment.

❯ yarn dev:basic
yarn run v1.22.21
$ cross-env NODE_ENV=development PAYLOAD_CONFIG_PATH=src/payload.config.ts ts-node src/dev.ts
(node:24425) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
[22:14:59] INFO (payload): Connected to MongoDB server successfully!
[22:14:59] INFO (payload): Starting Payload...
[22:14:59] INFO (payload): Payload Admin URL: http://10.0.1.236:3000/admin
Server listening on 3000...
webpack built 9c94e40fb139fa5bbe4f in 8779ms
WARNING in ./src/lib/payload.ts 226:16-28
export 'default' (imported as 'payload') was not found in 'payload' (possible exports: __esModule, webpackBundler)

WARNING in ./src/lib/payload.ts 257:16-28
export 'default' (imported as 'payload') was not found in 'payload' (possible exports: __esModule, webpackBundler)

WARNING in ./src/lib/payload.ts 288:16-28
export 'default' (imported as 'payload') was not found in 'payload' (possible exports: __esModule, webpackBundler)

WARNING in ./src/lib/payload.ts 308:16-34
export 'default' (imported as 'payload') was not found in 'payload' (possible exports: __esModule, webpackBundler)

WARNING in ./src/lib/payload.ts 365:24-40
export 'default' (imported as 'payload') was not found in 'payload' (possible exports: __esModule, webpackBundler)

WARNING in ./src/lib/payload.ts 410:35-51
export 'default' (imported as 'payload') was not found in 'payload' (possible exports: __esModule, webpackBundler)

WARNING in ./src/lib/payload.ts 700:24-36
export 'default' (imported as 'payload') was not found in 'payload' (possible exports: __esModule, webpackBundler)

WARNING in ./src/lib/payload.ts 733:24-36
export 'default' (imported as 'payload') was not found in 'payload' (possible exports: __esModule, webpackBundler)

webpack compiled with 8 warnings
<w> [webpack.cache.PackFileCacheStrategy] Caching failed for pack: Error: No serializer registered for ConcatSource
<w> while serializing webpack/lib/util/registerExternalSerializer.webpack-sources/ConcatSource -> Array { 2 items } -> ConcatSource
 ○ Compiling / ...
 ✓ Compiled / in 3.9s (1088 modules)
[BABEL] Note: The code generator has deoptimised the styling of /Users/jake/Development/personal/elkliandhart.com/.next/server/vendor-chunks/next.js as it exceeds the max of 500KB.
[BABEL] Note: The code generator has deoptimised the styling of /Users/jake/Development/personal/elkliandhart.com/.next/server/pages/_app.js as it exceeds the max of 500KB.
[BABEL] Note: The code generator has deoptimised the styling of /Users/jake/Development/personal/elkliandhart.com/.next/server/pages/index.js as it exceeds the max of 500KB.
[22:15:27] ERROR (payload): TypeError: Cannot read properties of undefined (reading 'payload')
    at forEach (/Users/jake/Development/personal/elkliandhart.com/node_modules/@payloadcms/richtext-slate/src/data/richTextRelationshipPromise.ts:38:32)
    at Array.forEach (<anonymous>)
    at recurseRichText (/Users/jake/Development/personal/elkliandhart.com/node_modules/@payloadcms/richtext-slate/src/data/richTextRelationshipPromise.ts:36:26)
    at richTextRelationshipPromise (/Users/jake/Development/personal/elkliandhart.com/node_modules/@payloadcms/richtext-slate/src/data/richTextRelationshipPromise.ts:136:3)
    at Object.afterReadPromise (/Users/jake/Development/personal/elkliandhart.com/node_modules/@payloadcms/richtext-slate/src/index.ts:37:43)
    at promise (/Users/jake/Development/personal/elkliandhart.com/node_modules/payload/src/fields/hooks/afterRead/promise.ts:165:42)
    at forEach (/Users/jake/Development/personal/elkliandhart.com/node_modules/payload/src/fields/hooks/afterRead/traverseFields.ts:49:14)
    at Array.forEach (<anonymous>)
    at traverseFields (/Users/jake/Development/personal/elkliandhart.com/node_modules/payload/src/fields/hooks/afterRead/traverseFields.ts:47:10)
    at promise (/Users/jake/Development/personal/elkliandhart.com/node_modules/payload/src/fields/hooks/afterRead/promise.ts:436:21)
    at forEach (/Users/jake/Development/personal/elkliandhart.com/node_modules/payload/src/fields/hooks/afterRead/traverseFields.ts:49:14)
    at Array.forEach (<anonymous>)
    at traverseFields (/Users/jake/Development/personal/elkliandhart.com/node_modules/payload/src/fields/hooks/afterRead/traverseFields.ts:47:10)
    at promise (/Users/jake/Development/personal/elkliandhart.com/node_modules/payload/src/fields/hooks/afterRead/promise.ts:288:21)
    at /Users/jake/Development/personal/elkliandhart.com/node_modules/payload/src/fields/hooks/afterRead/traverseFields.ts:49:14
 ⨯ src/pages/_app.tsx (220:29) @ map
 ⨯ TypeError: Cannot read properties of undefined (reading 'map')
    at eval (webpack-internal:///./src/pages/_app.tsx:250:36)
    at processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Promise.all (index 3)
    at async Function.MyApp.getInitialProps (webpack-internal:///./src/pages/_app.tsx:182:81)
    at async ea (webpack://next/./dist/esm/shared/lib/utils.js:73:19)
    at async e9 (webpack://next/./dist/esm/server/render.js:388:13)
    at async doRender (/Users/jake/Development/personal/elkliandhart.com/node_modules/next/src/server/base-server.ts:2311:20)
    at async cacheEntry.responseCache.get.routeKind (/Users/jake/Development/personal/elkliandhart.com/node_modules/next/src/server/base-server.ts:2593:24)
    at async DevServer.renderToResponseWithComponentsImpl (/Users/jake/Development/personal/elkliandhart.com/node_modules/next/src/server/base-server.ts:2450:24)
    at async DevServer.renderPageComponent (/Users/jake/Development/personal/elkliandhart.com/node_modules/next/src/server/base-server.ts:2979:16)
    at async DevServer.renderToResponseImpl (/Users/jake/Development/personal/elkliandhart.com/node_modules/next/src/server/base-server.ts:3039:24)
    at async DevServer.pipeImpl (/Users/jake/Development/personal/elkliandhart.com/node_modules/next/src/server/base-server.ts:1563:21)
    at async DevServer.NextNodeServer.handleCatchallRenderRequest (/Users/jake/Development/personal/elkliandhart.com/node_modules/next/src/server/next-server.ts:938:7)
    at async DevServer.handleRequestImpl (/Users/jake/Development/personal/elkliandhart.com/node_modules/next/src/server/base-server.ts:1348:9) {
  page: '/'
}
  218 |         return {
  219 |           ...journal,
> 220 |           docs: journal.docs.map((doc: JournalType) => {
      |                             ^
  221 |             // Remove these, spread the ...rest back into the object.
  222 |             const { layout, ...rest } = doc || {};
  223 |             return {
 ○ Compiling /_error ...
 ✓ Compiled /_error in 7.5s (1088 modules)
[BABEL] Note: The code generator has deoptimised the styling of /Users/jake/Development/personal/elkliandhart.com/.next/server/pages/_error.js as it exceeds the max of 500KB.
 ⨯ TypeError: Cannot read properties of undefined (reading 'map')
    at eval (webpack-internal:///./src/pages/_app.tsx:250:36)
    at processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Promise.all (index 3)
    at async Function.MyApp.getInitialProps (webpack-internal:///./src/pages/_app.tsx:182:81)
    at async ea (webpack://next/./dist/esm/shared/lib/utils.js:73:19)
    at async e9 (webpack://next/./dist/esm/server/render.js:388:13)
    at async doRender (/Users/jake/Development/personal/elkliandhart.com/node_modules/next/src/server/base-server.ts:2311:20)
    at async cacheEntry.responseCache.get.routeKind (/Users/jake/Development/personal/elkliandhart.com/node_modules/next/src/server/base-server.ts:2593:24)
    at async DevServer.renderToResponseWithComponentsImpl (/Users/jake/Development/personal/elkliandhart.com/node_modules/next/src/server/base-server.ts:2450:24)
    at async DevServer.renderErrorToResponseImpl (/Users/jake/Development/personal/elkliandhart.com/node_modules/next/src/server/base-server.ts:3355:16)
    at async pipe.req.req (/Users/jake/Development/personal/elkliandhart.com/node_modules/next/src/server/base-server.ts:3198:26)
    at async DevServer.pipeImpl (/Users/jake/Development/personal/elkliandhart.com/node_modules/next/src/server/base-server.ts:1563:21)
    at async DevServer.NextNodeServer.handleCatchallRenderRequest (/Users/jake/Development/personal/elkliandhart.com/node_modules/next/src/server/next-server.ts:956:9)
    at async DevServer.handleRequestImpl (/Users/jake/Development/personal/elkliandhart.com/node_modules/next/src/server/base-server.ts:1348:9)
[22:15:35] ERROR (payload): TypeError: Cannot read properties of undefined (reading 'payload')
    at forEach (/Users/jake/Development/personal/elkliandhart.com/node_modules/@payloadcms/richtext-slate/src/data/richTextRelationshipPromise.ts:38:32)
    at Array.forEach (<anonymous>)
    at recurseRichText (/Users/jake/Development/personal/elkliandhart.com/node_modules/@payloadcms/richtext-slate/src/data/richTextRelationshipPromise.ts:36:26)
    at richTextRelationshipPromise (/Users/jake/Development/personal/elkliandhart.com/node_modules/@payloadcms/richtext-slate/src/data/richTextRelationshipPromise.ts:136:3)
    at Object.afterReadPromise (/Users/jake/Development/personal/elkliandhart.com/node_modules/@payloadcms/richtext-slate/src/index.ts:37:43)
    at promise (/Users/jake/Development/personal/elkliandhart.com/node_modules/payload/src/fields/hooks/afterRead/promise.ts:165:42)
    at forEach (/Users/jake/Development/personal/elkliandhart.com/node_modules/payload/src/fields/hooks/afterRead/traverseFields.ts:49:14)
    at Array.forEach (<anonymous>)
    at traverseFields (/Users/jake/Development/personal/elkliandhart.com/node_modules/payload/src/fields/hooks/afterRead/traverseFields.ts:47:10)
    at promise (/Users/jake/Development/personal/elkliandhart.com/node_modules/payload/src/fields/hooks/afterRead/promise.ts:436:21)
    at forEach (/Users/jake/Development/personal/elkliandhart.com/node_modules/payload/src/fields/hooks/afterRead/traverseFields.ts:49:14)
    at Array.forEach (<anonymous>)
    at traverseFields (/Users/jake/Development/personal/elkliandhart.com/node_modules/payload/src/fields/hooks/afterRead/traverseFields.ts:47:10)
    at promise (/Users/jake/Development/personal/elkliandhart.com/node_modules/payload/src/fields/hooks/afterRead/promise.ts:288:21)
    at /Users/jake/Development/personal/elkliandhart.com/node_modules/payload/src/fields/hooks/afterRead/traverseFields.ts:49:14

Admin

Did you see the 500 server errors within the admin UI's console?

[jakehopking]

Reverting to 2.0.10 with again a completely fresh install in a fresh nvm env — all is working correctly again. This is driving me a little crazy 🤪

I notice you're running windows C:\... is there a slim chance this something to do with macOS?

UPDATE:

Out of curiosity I removed the yarn.lock and reinstalled to see if there was some legacy dependancy keeping my 2.0.10 version ticking over. It still works as expected. One interesting thing is that this warning (it's been present since the upgrade from 1x to 2x) has gone now a new yarn.lock has been generated:

WARNING in ./src/lib/payload.ts 226:16-28
export 'default' (imported as 'payload') was not found in 'payload' (possible exports: __esModule, webpackBundler)

UPDATE 2:

Following the disappearance of the WARNING above, I thought I'd try updating to 2.3.0.

It works now! 🚀

Something to keep in mind if others ever experience similar issues — try trashing your yarn.lock (although, not something I'd usually recommend).

Thanks again for looking into this @DanRibbens — without which I wouldn't have thought to employ extreme measures!

[jakehopking]

Not so fast Jake...

yarn build fails with this error:

❯ yarn build
yarn run v1.22.21
$ cross-env NODE_ENV=production yarn clear:build && yarn build:payload && yarn build:server && yarn copyfiles && yarn build:next:custom
$ rm -rf .next && rm -rf build && rm -rf dist && yarn clear:cache:next
$ rm -rf .next
$ cross-env PAYLOAD_CONFIG_PATH=src/payload.config.ts payload build
[23:29:05] INFO (payload): Starting Payload...
$ tsc --project tsconfig.server.json
$ copyfiles -u 1 "src/**/*.{html,css,scss,ttf,woff,woff2,eot,svg,jpg,png}" dist/
/Users/jake/Development/personal/elkliandhart.com/node_modules/cliui/build/index.cjs:291
const stringWidth = require('string-width');
                    ^

Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/jake/Development/personal/elkliandhart.com/node_modules/string-width/index.js from /Users/jake/Development/personal/elkliandhart.com/node_modules/cliui/build/index.cjs not supported.
Instead change the require of index.js in /Users/jake/Development/personal/elkliandhart.com/node_modules/cliui/build/index.cjs to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (/Users/jake/Development/personal/elkliandhart.com/node_modules/cliui/build/index.cjs:291:21) {
  code: 'ERR_REQUIRE_ESM'
}

Any ideas @DanRibbens?? ~~I've created a new branch new-yarn-lock if you would like to look yourself 🙏~~ this branch no longer exists. See latest comment.

I found this comment: mentioning upgrading to yarn 3 fixes it... https://github.com/storybookjs/storybook/issues/22431#issuecomment-1544283468 not tried yet.

[DanRibbens]

I've not tried yarn 3, could be worth trying or npm or pnpm.

I did run dev:basic and I only tried loading the admin UI as far as the register first user. I did see an error but I was only trying to make sure the webpack build was working and didn't go further.

I can check again tomorrow to see what the 500 error might be caused from.

[jakehopking]

@DanRibbens tldr;

• 🚀 Fixed everything by upgrading to yarn 4.0.2 — payload 2.3.0 now works for my solution.
• pnpm created server side and Admin UI errors related to slate, and therefore I abandoned it.
• @payloadcms/plugin-stripe needs its peer dependency updating?

Leaving below for reference.

@denolfe FYI with pnpm and yarn 4 I get:

PNPN

 WARN  Issues with peer dependencies found
.
└─┬ @payloadcms/plugin-stripe 0.0.13
  └── ✕ unmet peer payload@^1.1.8: found 2.3.0

Yarn 4.02

➤ YN0060: │ payload is listed by your project with version 2.3.0, which doesn't satisfy what @payloadcms/plugin-stripe (p8ad39) requests (^1.1.8).

PNPM Errors

ERROR in ./src/components/molecules/RichText/serialize.tsx 55:0-29
Module not found: Error: Can't resolve 'slate' in '/Users/jake/Development/personal/elkliandhart.com/src/components/molecules/RichText'

ERROR in ./src/fields/richText/video/Button/index.tsx 52:0-35
Module not found: Error: Can't resolve 'slate' in '/Users/jake/Development/personal/elkliandhart.com/src/fields/richText/video/Button'

ERROR in ./src/fields/richText/video/Button/index.tsx 53:0-52
Module not found: Error: Can't resolve 'slate-react' in '/Users/jake/Development/personal/elkliandhart.com/src/fields/richText/video/Button'

ERROR in ./src/fields/richText/video/Element/index.tsx 200:0-54
Module not found: Error: Can't resolve 'slate-react' in '/Users/jake/Development/personal/elkliandhart.com/src/fields/richText/video/Element'

After installing slate and slate-react independently pnpm add -D ... these error are fixed, however when viewing a record within the Admin UI, I see this slate related error making the the admin unusable:

Uncaught Error: The `useSlate` hook must be used inside the <Slate> component's context.
    useSlate index.es.js:2585
    VideoButton index.tsx:69
    React 12
    workLoop scheduler.development.js:266
    flushWork scheduler.development.js:239
    performWorkUntilDeadline scheduler.development.js:533

I'm gonna try yarn modern next to see if this works any better before coming back to pnpm.

Yarn 4

corepack enable
yarn set version stable
yarn install

Yarn node strategy: nodeLinker: node-modules

I can successfully run dev and prod also builds. Both with warnings and similar to yarn classic 👍

➤ YN0087: Migrated your project to the latest Yarn version 🚀

➤ YN0000: · Yarn 4.0.2
➤ YN0000: ┌ Resolution step
➤ YN0085: │ + @babel/register@npm:7.22.15, @babel/types@npm:7.23.5, @faceless-ui/modal@npm:2.0.1, @faceless-ui/slider@npm:1.1.17, and 1655 more.
➤ YN0000: └ Completed in 10s 869ms
➤ YN0000: ┌ Post-resolution validation
➤ YN0060: │ payload is listed by your project with version 2.3.0, which doesn't satisfy what @payloadcms/plugin-stripe (p8ad39) requests (^1.1.8).
➤ YN0002: │ elkliandhart.com@workspace:. doesn't provide @babel/core (pcdc44), requested by @babel/register.
➤ YN0002: │ elkliandhart.com@workspace:. doesn't provide eslint-plugin-jest (p0cf5a), requested by @trbl/eslint-config.
➤ YN0002: │ elkliandhart.com@workspace:. doesn't provide eslint-plugin-jest-dom (p55b31), requested by @trbl/eslint-config.
➤ YN0086: │ Some peer dependencies are incorrectly met; run yarn explain peer-requirements <hash> for details, where <hash> is the six-letter p-prefixed code.
➤ YN0000: └ Completed
➤ YN0000: ┌ Fetch step
➤ YN0013: │ 1613 packages were added to the project (+ 676.67 MiB).
➤ YN0000: └ Completed in 9s 382ms
➤ YN0000: ┌ Link step
➤ YN0007: │ @swc/core@npm:1.3.76 [8ad39] must be built because it never has been before or the last one failed
➤ YN0007: │ sharp@npm:0.32.6 must be built because it never has been before or the last one failed
➤ YN0007: │ @swc/core@npm:1.3.100 [7907d] must be built because it never has been before or the last one failed
➤ YN0007: │ esbuild@npm:0.16.4 must be built because it never has been before or the last one failed
➤ YN0007: │ fast-folder-size@npm:1.6.1 must be built because it never has been before or the last one failed
➤ YN0007: │ es5-ext@npm:0.10.62 must be built because it never has been before or the last one failed
➤ YN0000: └ Completed in 13s 421ms
➤ YN0000: · Done with warnings in 33s 810ms

~/Development/personal/elkliandhart.com new-yarn-lock* ≡ 34s
❯ yarn dev:basic
[09:38:17] INFO (payload): Connected to MongoDB server successfully!
[09:38:17] INFO (payload): Starting Payload...
[09:38:17] INFO (payload): Payload Admin URL: http://10.0.1.236:3000/admin
Server listening on 3000...
<i> [webpack-dev-middleware] wait until bundle finished: /__webpack_hmr
webpack built 911195e2e56d44737416 in 8435ms
webpack compiled successfully
 ○ Compiling /[...slug] ...
 ✓ Compiled /[...slug] in 3.8s (1089 modules)

[AlessioGr]

@jakehopking for PNPM, try adding a .npmrc file at the root of your project with the following contents:

node-linker=hoisted

That should fix the issue.

It's similar to setting nodeLinker: node-modules in yarn 4.

Regarding the Uncaught Error: The useSlate hook must be used inside the <Slate> component's context. error:

This error happens because you have duplicate Slate versions installed due to you manually installing slate and slate-react. You could fix that by making sure you have the same slate / slate-react versions as richtext-slate installed, and by using webpack aliases. Or just uninstall those dependencies and use node-linker=hoisted

[jakehopking]

Thanks for your suggestions @AlessioGr. I will be sticking with yarn 4 for now, but if I run into issues related to yarn in the future, I'll keep this in mind when trying pnpm again.