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

[qweyrt]

I'm trying to implement CKEditor 5 to my Nextjs project using this guide: https://ckeditor.com/docs/ckeditor5/latest/installation/integrations/next-js.html

However when I try to run the webpage shows this error:

My code is exactly like in the guide: custom-editor.tsx:

import React from 'react';
import { CKEditor } from "@ckeditor/ckeditor5-react";
import Editor from "ckeditor5-custom-build";

const editorConfiguration = {
    toolbar: [
        'heading',
        '|',
        'bold',
        'italic',
        'link',
        'bulletedList',
        'numberedList',
        '|',
        'outdent',
        'indent',
        '|',
        'imageUpload',
        'blockQuote',
        'insertTable',
        'mediaEmbed',
        'undo',
        'redo'
    ]
};

function CustomEditor( props ) {
        return (
            <CKEditor
                editor={ Editor }
                config={ editorConfiguration }
                data={ props.initialData }
                onChange={ (event, editor ) => {
                    const data = editor.getData();
                    console.log( { event, editor, data } );
                } }
            />
        )
}

export default CustomEditor;

page.tsx:

'use client' 

import React from 'react';
import dynamic from 'next/dynamic';

const CustomEditor = dynamic( () => {
  return import( '../components/frontend/custom-editor' );
}, { ssr: false } );

function Reports() {
  return (
    <CustomEditor
      initialData='<h1>Hello from CKEditor in Next.js!</h1>'
    />
  );
}

export default Reports;

So what happened here? And how do I fix it?

[Witoso]

Could you share how ckeditor5-custom-build looks in your package.json? 

@gorzelinski would you mind verifying if next didn't change something on their side?

[nicu-chiciuc]

I'm having the same error. Although I assume the circumstances are slightly different. It'd be hard to provide a full reproduction, but here's my journey.

We have a pnpm monorepo.

When testing an integration with Next.js and CkEditor, I've used the online builder and put the output in a separate package. This allowed to circumvent the issue of Next.js not allowing Global CSS, which is used in CkEditor plugins.

This worked, and I managed to test some custom plugins.

Then, I've tried to move the code directly in Next.js Initially I tried patching the css imports inside the ckeditor plugin packages. This didn't seem like a good approach since there are packages that have lots of css files.

So I've tried using 'next-global-css'. This seems to fix the global css problem, but I've stumbled on this issue now.

One thing I've had to take care of is the versions of the installed plugins. The latest version of CkEditor and its plugins is 41.0.0, but ckeditor-react 6.2.0 works with 40.2.0, so I had to downgrade the packages and even instal specific versions of some peer-dependencies (@ckeditor/ckeditor5-watchdog) so that the versions are the exact versions I need.

[Witoso]

The latest version of CkEditor and its plugins is 41.0.0, but ckeditor-react 6.2.0 works with 40.2.0

Could you elaborate? We haven't observed any problems, and ckeditor5-react doesn't have a dependency on a specific version.

Then, I've tried to move the code directly in Next.js
Initially I tried patching the css imports inside the ckeditor plugin packages.
This didn't seem like a good approach since there are packages that have lots of css files.

We are working on this one, should be done with ckeditor/ckeditor5#15502 in which we improve the whole installation flow.

[nicu-chiciuc]

ckeditor5-react doesn't have a dependency on a specific version.

Yes, "@ckeditor/ckeditor5-core": ">=40.1.0",, I assumed this automatically updates to even changes in major versions, but I think it was still using 40.2.0 instead of 41.0.0. I don't think this caused real issues, but I try not to have 2 copies of the same package. Also, there were Typescript issues when passing my custom editor to the <CKEditor />.

[Witoso]

@nicu-chiciuc yeah, peer deps settings suck right now, I noticed npm install --legacy-peer-deps work much better than the default.  Not sure how it works in pnpm though :/ 

Also, there were Typescript issues when passing my custom editor to the .

We will check this.

[PreveenGit]

I got the same error Cannot read properties of null (reading 'model'). But I got it fixed

Wrong Code: import {CKEditor} from '@ckeditor/ckeditor5-react'; import {ClassicEditor} from '@ckeditor/ckeditor5-build-classic';

Corrected Code:

import { CKEditor } from '@ckeditor/ckeditor5-react'; import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

I removed the curly braces from ClassicEditor

[DawidKossowski]

@nicu-chiciuc, generally, we have two separate issues:

1. The dependency issue, which has been fixed and described here: https://github.com/ckeditor/ckeditor5-react/pull/470#issuecomment-2063461771
2. The quick rerenders issue, which we are trying to fix in that PR: https://github.com/ckeditor/ckeditor5-react/pull/473

We plan to release those fixes soon.