CKEditor 5 Initial Setup Error

[pkhodaveissi]

This is my setup via latest create-react-app :

import React, { Component } from "react";
import CKEditor from "@ckeditor/ckeditor5-react";
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";

class App extends Component {
  render() {
    return (
      <div className="App">
        <h2>Using CKEditor 5 build in React</h2>
        <CKEditor
          editor={ClassicEditor}
          data="<p>Hello from CKEditor 5!</p>"
          onInit={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 });
          }}
        />
      </div>
    );
  }
}

export default App;

It logs this :

TypeError: Cannot read property '0' of undefined
    at Object.to (ckeditor.js:1439)

[ma2ciek]

Hi, @pkhodaveissi!

It's a babel issue described in facebook/create-react-app#5387 and ckeditor/ckeditor5-react#41. In short, some babel transformation doesn't work correctly on our codebase.

Because of that bug, the create-react-app@2 isn't supported yet. Please, try the create-react-app@1.