CKEditorContext erorrs with next.js dev server

[f1ames]

Using CKEditorContext errors with next.js dev server.

Steps

1. Create next.js project (I used npx create-next-app@latest and picked TS, ESlint, src/ and AppRouter).

2. Prepare below files:

Using app structure:

page.tsx:

import dynamic from 'next/dynamic';

const CustomEditor = dynamic( () => import( '@/components/editorWithContext' ), { ssr: false } );

function Home() {
  return (
    <CustomEditor />
  );
}

export default Home;

@/components/editorWithContext.tsx:

// components/custom-editor.js
'use client' // only in App Router

import { CKEditor, CKEditorContext } from '@ckeditor/ckeditor5-react';
import { ClassicEditor, Bold, Essentials, Italic, Mention, Paragraph, Undo, Context, ContextWatchdog, CloudServices } from 'ckeditor5';
import { SlashCommand, CloudServicesCommentsAdapter, CommentsRepository, RealTimeCollaborativeComments, Comments } from 'ckeditor5-premium-features';

import 'ckeditor5/ckeditor5.css';
import 'ckeditor5-premium-features/ckeditor5-premium-features.css';

function CustomEditorWithContext() {

    return (
        <CKEditorContext
            context={ Context }
            contextWatchdog={ ContextWatchdog }
            onError={(err) => console.log(err)}
            config={{
                cloudServices: {
                    tokenUrl: '...',
                    webSocketUrl: '...'
                },
                licenseKey: '...',
                toolbar: [ 'undo', 'redo', '|', 'bold',  'comment', 'commentsArchive']
            }}
        >

            <CKEditor
                editor={ ClassicEditor }
                config={ {
                    plugins: [
                        Essentials, Mention, Paragraph, SlashCommand, Undo, Bold, RealTimeCollaborativeComments, Comments,
                        CloudServices, CloudServicesCommentsAdapter, CommentsRepository
                    ],
                    mention: {
                        feeds: [
                            {
                                marker: '@',
                                feed: [ '@Barney', '@Lily', '@Marshall', '@Robin', '@Ted' ]
                            },
                        ]
                    },
                    collaboration: {
                        channelId: 'ch-1'
                    },
                } }
                data='<p>Hello from the 1st editor working with the context!</p>'
                onReady={ ( editor ) => {
                    console.log( 'Editor 1 is ready to use!', editor );
                } }
            />

            <CKEditor
                editor={ ClassicEditor }
                config={ {
                    plugins: [
                        Essentials, Mention, Paragraph, SlashCommand, Undo, RealTimeCollaborativeComments, Comments,
                        CloudServices, CloudServicesCommentsAdapter, CommentsRepository
                    ],
                    collaboration: {
                        channelId: 'ch-2'
                    },
                } }
                data='<p>Hello from the second editor working with the context!</p>'
                onReady={ ( editor ) => {
                    console.log( 'Editor 2 is ready to use!', editor );
                } }
            />

        </CKEditorContext>
    );
}

export default CustomEditorWithContext;

package.json:

{
  "name": "nextjs-nim-ts",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "react": "^18",
    "react-dom": "^18",
    "next": "14.2.3",
    "@ckeditor/ckeditor5-react": "8.0.0-alpha.0",
    "ckeditor5": "42.0.0-alpha.2",
    "ckeditor5-premium-features": "42.0.0-alpha.2"
  },
  "devDependencies": {
    "typescript": "^5",
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "eslint": "^8",
    "eslint-config-next": "14.2.3"
  }
}

3. Run npm run dev.

4. Visit localhost:3000.

Actual behavior

Editors are not initialized, error in the console:

Semaphore unmounting error: 
TypeError: Cannot read properties of null (reading 'model')

Error: Cannot add items to destroyed watchdog.

Semaphore mounting error: 
Error: Item with the given id was not registered: e684be1018ff5f08126b45893d5650bf8.

Expected behavior

It works.

Additional info

It works with npm run build && npm start. I also checked with plain React and it worked there too without problems.

Maybe it's related to next.js dev server and hot reload?

[Mati365]

Can confirm, fully reproducible on my machine.

[Mati365]

@Witoso / @f1ames I checked it using https://github.com/ckeditor/ckeditor5-react/pull/480 branch (yarn link approach) and it's no longer reproducible. I'd suggest to check if this error actually happens on old installation methods.

[f1ames]

@Mati365 I can confirm it work fine with #480 👍🎉