Ckeditor5: Can't Import Customized Build into ReactJS

[moshemo]

Is this a bug report or feature request? (choose one)

🐞 Bug report

💻 Version of CKEditor

CKEditor5 with Customized Build according to this tutorial: https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/installing-plugins.html#adding-a-plugin-to-a-build

📋 Steps to reproduce

1. Follow instructions on this tutorial step-by-step. I do not add anything nor skip anything.

2. Create a new create-react-app (or a new react app in codesandbox).

3. Create a folder called ckeditor on the same level as App.js.

4. Copy the contents of the build folder into the ckeditor folder. When done, the ckeditor folder contains the following:

• ckeditor.js
• ckeditor.js.map
• translations [this is a folder]

1. npm install @ckeditor/ckeditor5-react

2. Import both CKEditor and ClassicEditor into App.js as follows:

import CKEditor from "@ckeditor/ckeditor5-react";
import ClassicEditor from "./ckeditor/ckeditor";

1. Add <CKEditor> component to App.js as follows:

function App() {
  return (
    <div className="App">
      <h2>Editor</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 });
        }}
        onBlur={(event, editor) => {
          console.log("Blur.", editor);
        }}
        onFocus={(event, editor) => {
          console.log("Focus.", editor);
        }}
      />
    </div>
  );
}

NOTE
Here is the final code of App.js:

import React from "react";
import logo from "./logo.svg";
import "./App.css";
import CKEditor from "@ckeditor/ckeditor5-react";
import ClassicEditor from "./ckeditor/ckeditor";

function App() {
  return (
    <div className="App">
      <h2>Editor</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 });
        }}
        onBlur={(event, editor) => {
          console.log("Blur.", editor);
        }}
        onFocus={(event, editor) => {
          console.log("Focus.", editor);
        }}
      />
    </div>
  );
}

export default App;

And here is the folder structure of my app:

• src
  
  
  
  • ckeditor
    
    
    
    
    
    • translations
    
    
    
    • ckeditor.js
    
    
    
    • ckeditor.js.map
    
    
    
  
  
  • App.js
  
  
  • index.js
  
  

1. Run npm start to start up create-react-app.

✅ Expected result

That I would see a working version of my customized build (like I do when I run sample/index.html

❎ Actual result

I get the following error message:

Failed to compile.

./src/App.js
Attempted import error: './ckeditor/ckeditor' does not contain a default export (imported as 'ClassicEditor').

📃 Other details that might be useful

If I install @ckeditor/ckeditor5-build-classic and import it:

import ClassicEditor from "@ckeditor/ckeditor5-build-classic";

Then everything works fine.

Also, here is a gist of the unminified version of the customized build ckeditor.js file (i.e., the file that I am trying to import, but that is giving me the error): https://gist.github.com/moshemo/25f5b84e92ceabab32343e45282294c1

[pomek]

Related issue described here – https://github.com/ckeditor/ckeditor5-build-classic/issues/81#issuecomment-526563499.

[pomek]

TL;DR: do not copy dependencies to the src/ directory which is parsed by Webpack/Babel and other scripts that can break a minified build.

I recommend cloning the entire build repository, commit your changes and install the package (build) using npm/yarn and Github URL.

[moshemo]

@pomek First of all, thanks for the quick response.

Secondly, let me see if I understand your response. I'll refer for now to your TL;DR (although I did try and read your longer response that you quoted above).

First -- you wrote: 'do not copy dependencies to the src/ directory'.

These are the steps that I took: https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/installing-plugins.html#adding-a-plugin-to-a-build

Can you let me know which of those steps is considered copying a dependency to the src directory? Is it adding the alignment package from npm?

Secondly, you state that you 'recommend cloning the entire build repository'.

That's what I thought I did -- I started off as follows:

git clone -b stable https://github.com/ckeditor/ckeditor5-build-classic.git

Do you mean 'forking' the repository? If so, I think I now understand what you are recommending -- that I fork the repository, make my changes and then publish those changes to npm. I then install the npm package and import it that way.

Is that correct?

If so, I'm just not clear where the Github URL fits into all of this.

Either way, can you verify that I understood your recommendation correctly?

Thanks.

[pomek]

@moshemo, everything that you've done is correct. By typing "cloning" I meant forking the entire repository of course.

What I would like to say that we should avoid adding any libraries (especially minified ones) to a directory where our sources are placed. As we know, most of the applications that we are creating now, need to be parsed by Webpack or Babel or other scripts that modify source code. During this transpile process, source code may be understood incorrectly by those parsers and they will produce an invalid output code that leads to unknown problems.

Let me answer your question:

Can you let me know which of those steps is considered copying a dependency to the src directory? Is it adding the alignment package from npm?

Our guide assumes that you will have your own repository for the build. It can be forked based on ours or you can create a fresh one that will provide a build.

After modifying source files and building the destination file (the editor), you should commit and push those changes.

It allows installing the build from Github (as a dependency). It will land to the node_modules/ directory which is ignored during transpile process.

Instead of, you did:

1. Copy the contents of the build folder into the ckeditor folder. When done, the ckeditor folder contains the following:

And the entire minified code was parsed once again. Something went wrong and we finished with the error.

What could you do in order to get those things to work:

1. Fork/clone the repository.
2. Modify the build as you wish.
3. Build and commit your changes.
4. Depends on the first step:
   
   
   
   • for forked repository: push the changes,
   
   
   • for cloned repository: create a new repository and push your code here,
   
   
   • ☝️ you can avoid this by installing the module from local disc: npm install /path-to-the-build but it won't work for other guys you work with.
   
   
5. Install the build from Github or locally.
6. Your code should be available under the path: node_modules/[package-name]/

7. In src/App.js you can import the editor by typing:

   import ClassicEditor from '[package-name]';
   

Because dependencies (everything inside the node_modules/ directory) aren't touched during transpile process, everything should work.

Let me know did I helped you.

[moshemo]

Well, it took me a while (and a number of tries) to create the npm package. But, that did it -- and it now WORKS!

Thanks -- much appreciated.

[moshemo]

Now that I got it to work, I would like to update the docs so that it's a bit clearer.

Before I do so, though, I'd like to clarify a point that you made. You wrote:

It allows installing the build from Github (as a dependency). It will land to the node_modules/ directory

I'm not 100% following. I understand how I can install an npm package into the node_modules directory. But how can I install a Github repository into the node_modules directory (unless I've published that repository to npmjs and that is what you are referring to -- i.e., to a Github repository that has been published on npm).

[pomek]

Take a look at the npm documentation – https://docs.npmjs.com/cli/install

npm install <git-host>:<git-user>/<repo-name>

It should work.

[moshemo]

Got it, thanks for all your help.

[Stalinko]

Thanks. This helped me too.
First I tried to clone the repo, adjust it, make a build, then copy into my project and import(), but it failed.
Then did it this way:

1. Forked the repo
2. Cloned stable branch of my fork
3. Adjusted the files and made a build
4. Committed & pushed everything
5. Then in my main project installed my fork via npm install <gituser>/ckeditor5#stable
6. Then imported my build import('ckeditor5/packages/ckeditor5-build-inline/build/ckeditor')

And finally it worked!

But I have a strong feeling that this is not how it should be done. Forking whole repo, committing compiled files, then downloading whole forked repo just to use one file from it. Looks very excessive. But I couldn't find any better way unfortunately.