CKEditorContext erorrs with next.js dev server
f1ames opened this issue · 3 comments
f1ames commented
Using CKEditorContext
errors with next.js
dev server.
Steps
-
Create
next.js
project (I usednpx create-next-app@latest
and picked TS, ESlint,src/
andAppRouter
). -
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"
}
}
-
Run
npm run dev
. -
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 commented
Can confirm, fully reproducible on my machine.
Mati365 commented