Issues with Custom Endpoint and jsdom (lexical documentation)

Subject: Issues with Custom Endpoint and

in Payload CMS

---

Hi everyone,

I'm encountering a challenging issue with converting string to lexical data and could really use some help. I followed the instructions in the Payload CMS documentation here [Payload CMS Rich Text - Lexical](

).

However, when I compile my code, I'm facing a significant number of errors. The primary problem seems to originate from the

package, which I would only want to use server side. I attempted to resolve this by creating an alias for

, but I'm unsure if my approach is correct.

Here's my webpack configuration that successfully eliminated terminal errors:

webpack: config => {
  return {
    ...config,
    resolve: {
      ...config.resolve,
      alias: {
        ...config.resolve.alias,
        ['jsdom']: mockModule,
      },
      fallback: {
        util: false,
        url: false,
        child_process: false,
        vm: false,
        os: false,
        zlib: false,
        assert: false,
        canvas: false,
        net: false,
        tls: false,
        fs: false
      }
    }
  }
},

Unfortunately, this solution led to a new error in the frontend console, preventing Payload CMS from functioning correctly. The error is as follows:

Uncaught TypeError: Class extends value undefined is not a constructor or null
    at ./node_modules/.pnpm/jsdom@22.1.0/node_modules/jsdom/lib/jsdom/living/helpers/http-request.js (http-request.js:16:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at ./node_modules/.pnpm/jsdom@22.1.0/node_modules/jsdom/lib/jsdom/living/xhr/xhr-utils.js (xhr-utils.js:11:17)

I'm at a bit of a loss here and would greatly appreciate any guidance or suggestions on how to resolve this issue. This is my biggest pain point and can't wait to switch over to Next.js for Payload CMS ❤️

Thank you in advance for your help!