Bug Report: openModal is not a function error when adding a link in the RichText Slate editor

[JM-JKISOL]

Description: I am encountering an issue with the RichText editor (@payloadcms/richtext-slate package, version 1.5.2) while using it in a Next.js project. When trying to add a link in the editor, the modal to input the link does not show, and I receive the following error in the browser console:

Uncaught (in promise) TypeError: openModal is not a function

Environment: @payloadcms/richtext-slate: 1.5.2 Next.js: 13.5.2 npm: 10.7.0 Node.js: 20.15.0

Steps to Reproduce:

1. Install @payloadcms/richtext-slate using npm i @payloadcms/richtext-slate.
2. Implement the RichText editor in a Next.js project.
3. Attempt to add a link using the RichText editor.
4. Observe that the link modal does not appear.
5. Check the console for the error: Uncaught (in promise) TypeError: openModal is not a function.

Expected Behavior: The modal to input the link should appear when attempting to add a link using the RichText Slate editor.

Actual Behavior: The link modal does not appear, and the following error is logged in the console:

Uncaught (in promise) TypeError: openModal is not a function

Additional Information: I am using the RichText Slate editor in a Next.js project. Please let me know if more information is needed or if there's a workaround for this issue.

[tijsomnicasa]

I'm having the same error [email protected] @payloadcms/[email protected]

[dbambulaks]

Have you tried to strict downgrade to [email protected]? Looks like 'use client' directive is introduced in @faceless-ui/[email protected] which could be the case for the issues, we have something similar happening....

[tijsomnicasa]

@dbambulaks I can confirm this solves the problem! Thank you very much for your input!

Just as an FYI for devs, the same error occurs in the lexical editor for [email protected]

[marmik-concetto]

Hi I am new in the payload cms. I have same issue. i have installed the basic website from the payloadcms. can you tell me how to resolve the issue? below is the my package.json file

"version": "1.0.0", "main": "dist/server.js", "license": "MIT", "scripts": { "dev": "cross-env PAYLOAD_CONFIG_PATH=src/payload/payload.config.ts nodemon", "seed": "rm -rf media && cross-env PAYLOAD_SEED=true PAYLOAD_DROP_DATABASE=true PAYLOAD_CONFIG_PATH=src/payload/payload.config.ts ts-node src/server.ts", "build:payload": "cross-env PAYLOAD_CONFIG_PATH=src/payload/payload.config.ts payload build", "build:server": "tsc --project tsconfig.server.json", "build:next": "cross-env PAYLOAD_CONFIG_PATH=dist/payload/payload.config.js NEXT_BUILD=true node dist/server.js", "build": "cross-env NODE_ENV=production yarn build:payload && yarn build:server && yarn copyfiles && yarn build:next", "serve": "cross-env PAYLOAD_CONFIG_PATH=dist/payload/payload.config.js NODE_ENV=production node dist/server.js", "eject": "yarn remove next react react-dom @next/eslint-plugin-next && ts-node eject.ts", "copyfiles": "copyfiles -u 1 \"src/**/*.{html,css,scss,ttf,woff,woff2,eot,svg,jpg,png,js}\" dist/", "generate:types": "cross-env PAYLOAD_CONFIG_PATH=src/payload/payload.config.ts payload generate:types", "generate:graphQLSchema": "cross-env PAYLOAD_CONFIG_PATH=src/payload/payload.config.ts payload generate:graphQLSchema", "lint": "eslint src", "lint:fix": "eslint --fix --ext .ts,.tsx src", "payload": "cross-env PAYLOAD_CONFIG_PATH=src/payload/payload.config.ts payload" }, "dependencies": { "@payloadcms/bundler-webpack": "^1.0.0", "@payloadcms/db-mongodb": "^1.0.0", "@payloadcms/plugin-cloud": "^3.0.0", "@payloadcms/plugin-nested-docs": "^1.0.8", "@payloadcms/plugin-redirects": "^1.0.0", "@payloadcms/plugin-seo": "^1.0.10", "@payloadcms/richtext-slate": "^1.0.0", so on...

[tiffenyk]

Hi I am new in the payload cms. I have same issue. i have installed the basic website from the payloadcms. can you tell me how to resolve the issue? below is the my package.json file

"version": "1.0.0", "main": "dist/server.js", "license": "MIT", "scripts": { "dev": "cross-env PAYLOAD_CONFIG_PATH=src/payload/payload.config.ts nodemon", "seed": "rm -rf media && cross-env PAYLOAD_SEED=true PAYLOAD_DROP_DATABASE=true PAYLOAD_CONFIG_PATH=src/payload/payload.config.ts ts-node src/server.ts", "build:payload": "cross-env PAYLOAD_CONFIG_PATH=src/payload/payload.config.ts payload build", "build:server": "tsc --project tsconfig.server.json", "build:next": "cross-env PAYLOAD_CONFIG_PATH=dist/payload/payload.config.js NEXT_BUILD=true node dist/server.js", "build": "cross-env NODE_ENV=production yarn build:payload && yarn build:server && yarn copyfiles && yarn build:next", "serve": "cross-env PAYLOAD_CONFIG_PATH=dist/payload/payload.config.js NODE_ENV=production node dist/server.js", "eject": "yarn remove next react react-dom @next/eslint-plugin-next && ts-node eject.ts", "copyfiles": "copyfiles -u 1 \"src/**/*.{html,css,scss,ttf,woff,woff2,eot,svg,jpg,png,js}\" dist/", "generate:types": "cross-env PAYLOAD_CONFIG_PATH=src/payload/payload.config.ts payload generate:types", "generate:graphQLSchema": "cross-env PAYLOAD_CONFIG_PATH=src/payload/payload.config.ts payload generate:graphQLSchema", "lint": "eslint src", "lint:fix": "eslint --fix --ext .ts,.tsx src", "payload": "cross-env PAYLOAD_CONFIG_PATH=src/payload/payload.config.ts payload" }, "dependencies": { "@payloadcms/bundler-webpack": "^1.0.0", "@payloadcms/db-mongodb": "^1.0.0", "@payloadcms/plugin-cloud": "^3.0.0", "@payloadcms/plugin-nested-docs": "^1.0.8", "@payloadcms/plugin-redirects": "^1.0.0", "@payloadcms/plugin-seo": "^1.0.10", "@payloadcms/richtext-slate": "^1.0.0", so on...

You need to change the payload version to 2.30.0 (remove the ^) in the package.json. The problem come with @faceless-ui/[email protected], if you use @faceless-ui/[email protected] it's working.

[itsaalexk]

Hello just wanted to clarify. Are there any plans on releasing a bugfix for this?

[jacobsfletch]

Have you tried to strict downgrade to [email protected]? Looks like 'use client' directive is introduced in @faceless-ui/[email protected] which could be the case for the issues, we have something similar happening....

I'm not sure how the presence of the "use client" directive would affect this. That is just a string literal that the compiler would ignore if it lacks support. I suspect the issue is with something else.

[jacobsfletch]

@JM-JKISOL if you're using the slate editor in your own app, completely outside of Payload's admin panel, then you'll need to install @faceless-ui/modal in your own project and wrap your app with the <ModalProvider> component. This is what provides the editor with the React context it needs to access the openModal method.

For everyone else experiencing this within the admin panel, this is likely because there are duplicative copies of the @faceless-ui/modal installed in your project. Your package manager may have not properly resolved to the same version across each of the modules that depend on it, and instead installed separate copies entirely. You can confirm this by searching in your package manager's lockfile (i.e. package-lock.json, yarn.lock, etc.) for instances of this module and comparing their respective versions. They need to match in order to be properly deduped.

You might also be able to use npm why @faceless-ui/modal for this.

[dansasser]

@JM-JKISOL I have ran npm why @faceless-ui/modal and got ` npm why @faceless-ui/modal @faceless-ui/[email protected] node_modules/@faceless-ui/modal @faceless-ui/modal@"2.0.1" from @payloadcms/[email protected] node_modules/@payloadcms/richtext-slate @payloadcms/richtext-slate@"^1.0.0" from the root project

@faceless-ui/[email protected] node_modules/payload/node_modules/@faceless-ui/modal @faceless-ui/modal@"2.0.2" from [email protected] node_modules/payload payload@"^2.30.3" from the root project peer payload@"^2.0.0" from @payloadcms/[email protected] node_modules/@payloadcms/bundler-webpack @payloadcms/bundler-webpack@"^1.0.0" from the root project peer payload@"^2.0.0" from @payloadcms/[email protected] node_modules/@payloadcms/db-mongodb @payloadcms/db-mongodb@"^1.0.0" from the root project peer payload@"^1.8.2 || ^2.0.0" from @payloadcms/[email protected] node_modules/@payloadcms/plugin-cloud @payloadcms/plugin-cloud@"^3.0.0" from the root project peer payload@"^0.18.5 || ^1.0.0 || ^2.0.0" from @payloadcms/[email protected] node_modules/@payloadcms/plugin-nested-docs @payloadcms/plugin-nested-docs@"^1.0.8" from the root project peer payload@"^0.18.5 || ^1.0.0 || ^2.0.0" from @payloadcms/[email protected] node_modules/@payloadcms/plugin-redirects @payloadcms/plugin-redirects@"^1.0.0" from the root project peer payload@"^0.18.5 || ^1.0.0 || ^2.0.0" from @payloadcms/[email protected] node_modules/@payloadcms/plugin-seo @payloadcms/plugin-seo@"^1.0.10" from the root project peer payload@"^1.1.8 || ^2.0.0" from @payloadcms/[email protected] node_modules/@payloadcms/plugin-stripe @payloadcms/plugin-stripe@"^0.0.19" from the root project peer payload@"^2.3.0" from @payloadcms/[email protected] node_modules/@payloadcms/richtext-slate @payloadcms/richtext-slate@"^1.0.0" from the root project`

Now how do I make sure that they all match?

[nicola-loddo]

Hi I have the same problem. Initially I tried to downgrade to [email protected] but nothing changed. I also tried to go down to an older one, the 2.0.0, but I still see the error.

This is my current dependeies setup in package.json:

"@payloadcms/bundler-webpack": "^1.0.0",
"@payloadcms/db-mongodb": "^1.0.0",
"@payloadcms/plugin-cloud": "^3.0.0",
"@payloadcms/plugin-nested-docs": "^1.0.12",
"@payloadcms/plugin-seo": "^2.2.1",
"@payloadcms/richtext-slate": "^1.4.0",
"cross-env": "^7.0.3",
"dotenv": "^8.2.0",
"express": "^4.17.1",
"morgan": "^1.10.0",
"payload": "^2.0.0"

[marcmaceira]

Hi @nicola-loddo,

Make sure to use a fixed version of payload. Instead of "payload": "^2.0.0", use "payload": "2.30.0" (get rid of the caret). Check out https://docs.npmjs.com/cli/v10/commands/npm-update.

[nicola-loddo]

Hi @nicola-loddo,

Make sure to use a fixed version of payload. Instead of "payload": "^2.0.0", use "payload": "2.30.0" (get rid of the caret). Check out https://docs.npmjs.com/cli/v10/commands/npm-update.

It's working! Sorry I forget to remove the caret! But something is still not working well.

Now I see the modal and I can select an "internal link", but the relationship is empty. If I see the result in the api I see this:

{
  "children": [
    {
      "text": "link"
    }
  ],
  "doc": {
    "relationTo": "posts",
    "value": null
  },
  "fields": {
    "rel": [
      "noreferrer"
    ]
  },
  "linkType": "internal",
  "type": "link"
}

This is my config:

import { Field } from 'payload/types'
import { slateEditor } from '@payloadcms/richtext-slate'

const copy: Field = {
    name: 'copy',
    type: 'group',
    fields: [
        {
            name: 'content',
            type: 'richText',
            editor: slateEditor({
                admin: {
                    elements: ["h2", "h3", "h4", "h5", "h6", "blockquote", "link", "ol", "ul", "textAlign", "indent"],
                    leaves: ['bold', 'italic', 'strikethrough', 'underline'],
                    link: {
                        fields: [
                            {
                                name: 'rel',
                                label: 'Rel Attribute',
                                type: 'select',
                                hasMany: true,
                                options: ['noopener', 'noreferrer', 'nofollow'],
                            },
                        ],
                    }
                }
            })
        }
    ]
}

export default copy

The value of relationTo si empty. Until a few days ago everything was working perfectly

[jacobsfletch]

@nicola-loddo feel free to open a new issue for that specifically. Be sure to include a valid reproduction.

For anyone else just jumping into this thread, check out my comment here about duplicative dependencies and @marcmaceira's comment here and pinning versions.

[github-actions[bot]]

This issue has been automatically locked. Please open a new issue if this issue persists with any additional detail.