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 👍🎉