You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
First, create an next.js app or open an existing next.js project
write the code from documentation example
importReactfrom"react";import{CKEditor}from"@ckeditor/ckeditor5-react";importClassicEditorfrom"@ckeditor/ckeditor5-build-classic";constEditorDemo=()=>{return(<divclassName="App"><h2>UsingCKEditor5buildinReact</h2><CKEditoreditor={ClassicEditor}data="<p>Hello from CKEditor 5!</p>"onReady={(editor)=>{// You can store the "editor" and use when it is needed.console.log("Editor is ready to use!",editor);}}onChange={(event,editor)=>{
const data=editor.getData();console.log({ event, editor, data });}}onBlur={(event,editor)=>{console.log("Blur.",editor);}}onFocus={(event,editor)=>{console.log("Focus.",editor);}}/></div>);};exportdefaultEditorDemo;
And then, the ckeditor5-react trigged the error like this:
Uncaught ReferenceError: self is not defined
at Object.<anonymous> (file://E:\zzkpnews\zzkpnews-cms\node_modules\@ckeditor\ckeditor5-react\dist\index.js:5:244)
at Module._compile (node:internal/modules/cjs/loader:1254:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)
at Module.load (node:internal/modules/cjs/loader:1117:32)
at Module._load (node:internal/modules/cjs/loader:958:12)
at Module.require (node:internal/modules/cjs/loader:1141:19)
at require (node:internal/modules/cjs/helpers:110:18)
at @ckeditor/ckeditor5-react (file://E:\zzkpnews\zzkpnews-cms\.next\server\pages\creator.js:112:18)
at __webpack_require__ (file://E:\zzkpnews\zzkpnews-cms\.next\server\webpack-runtime.js:33:42)
at eval (webpack-internal:///./views/creator-publish-article/PublishArticleEditor.tsx:9:83)
Then the program was crashed and editor can not be rendered and launched correctly.
The text was updated successfully, but these errors were encountered:
To use the editor in the next.js setup, you need to unfortunately use a workaround that will disable ssr. Here's an example: ckeditor/ckeditor5#7376 (comment). Most likely this is the cause of the issue.
My development environment is
And here are steps for trigging bug:
And then, the
ckeditor5-react
trigged the error like this:Then the program was crashed and editor can not be rendered and launched correctly.
The text was updated successfully, but these errors were encountered: