Error using NextJS [TypeError]: domDocument.createElement is not a function

[shijialee]

📝 Ask a question

What is your question? Please be as specific as possible to help us understand it.

I am getting the error when running pnpm dev under this environment. Am I missing anything?

• next: "15.2.4",
• react": "^19.0.0"
• "ckeditor5": "^45.1.0",

Here is the code.

import { CKEditor } from '@ckeditor/ckeditor5-react'
import {
  Alignment,
  Bold,
  ClassicEditor,
  Code,
  Essentials,
  Font,
  Heading,
  Indent,
  Italic,
  Link,
  List,
  Paragraph,
  Underline,
} from 'ckeditor5'
import type { FC } from 'react'
import 'ckeditor5/ckeditor5.css'

export interface EditorProps {
  defaultValue?: string
  onChange?: (value: string) => void
}

export const Editor: FC<EditorProps> = ({ defaultValue, onChange }) => {
  return (
    <CKEditor
      editor={ClassicEditor}
      config={{
        licenseKey: 'GPL', // Or 'GPL'.
        plugins: [
          Essentials,
          Paragraph,
          Bold,
          Italic,
          Heading,
          List,
          Underline,
          Font,
          Indent,
          Code,
          Alignment,
          Link,
        ],
        toolbar: [
          'undo',
          'redo',
          '|',
          'heading',
          '|',
          'fontsize',
          'fontColor',
          'fontBackgroundColor',

          '|',
          'bold',
          'italic',
          'underline',
          'link',
          'alignment',
          '|',
          'bulletedList',
          'numberedList',
          'todoList',
          'outdent',
          'indent',

          // 'formatPainter',
        ],
        initialData: defaultValue,
      }}
      onReady={(editor) => {
        const root = editor.editing.view.document.getRoot()
        if (root) {
          editor.editing.view.change((writer) => {
            writer.setStyle('min-height', '300px', root)
          })
          editor.editing.view.focus()
        }
      }}
      onChange={(_, editor) => {
        onChange?.(editor.getData())
      }}
    />
  )
}

Thanks!

[Reinmar]

What error do you get?

[CKEditorBot]

The issue lacks the feedback we asked for two weeks. Hence, we've marked it as stale and will close it in 30 days. We understand it may still be relevant, so if you're interested in the solution, leave a comment or reaction under this issue.

[CKEditorBot]

We've closed your issue due to inactivity. We understand that the issue may still be relevant. If so, feel free to open a new one (and link this issue to it).