Ckeditor5-react: create-react-app@2 support

Created on 2 Oct 2018 · 27Comments · Source: ckeditor/ckeditor5-react

https://reactjs.org/blog/2018/10/01/create-react-app-v2.html

AFAIR one of the things that was supposed to change was support for ES6 dependencies. So perhaps we can test it and improve the integration guide.

docs task

Source

Reinmar

Most helpful comment

We've just released new versions of our builds. Each of them is working with CRA@2.

pomek on 28 Feb 2019

🎉6

All 27 comments

First bug: https://github.com/ckeditor/ckeditor5-react/issues/41

After reading https://github.com/ckeditor/ckeditor5-react/issues/41#issuecomment-428305791 I'm not sure whether CRA@2 and #41 are related to each other.

pomek on 9 Oct 2018

I reported an issue to RCA team because I don't have any idea why it does not work: https://github.com/facebook/create-react-app/issues/5387

pomek on 10 Oct 2018

Does #41 happen by default or only when building for production?

I need to somehow warn people about this issue in the blog post and documentation. So I'd like to understand at what stage we should do that.

Reinmar on 16 Oct 2018

Both modes produce an application that does not work :(

pomek on 16 Oct 2018

Could you make a PR to the documentation? I think we should add an <info-box warning> pointing people to this ticket. Something like "For compatibility with create-react-app@2 see ...".

Also, I think we need to add @1 to npm i create-react-app so to turn people awareness to that. Unfortunately, it's really unlucky for us that this issue appeared now.

Reinmar on 16 Oct 2018

👍1

Could you make a PR to the documentation? I think we should add an pointing people to this ticket. Something like "For compatibility with create-react-app@2 see ...".

https://github.com/ckeditor/ckeditor5/pull/1309

pomek on 16 Oct 2018

This issue shouldn't occur anymore after merging https://github.com/babel/babel/pull/8920.

pomek on 25 Oct 2018

Can confirm. Last week it didn't work, now it does.

tayupov on 26 Oct 2018

Interesting, because https://github.com/babel/babel/pull/8920 is still open... Are you sure that you haven't changed something else (e.g. switched off transpilation to ES5)?

Reinmar on 26 Oct 2018

Sorry, you are right. It might have had to do with me tweaking some configuration.
However I'm back to having the same problem. I'm using CRA2 and didn't eject.

tayupov on 11 Nov 2018

I just downgrade the react-script version from 2.1.1 to 1.1.5 , it works

believe1499 on 11 Jan 2019

Unfortunately, we're waiting for https://github.com/babel/babel/issues/8913 to be fixed, but from the discussion, it seems that this is a pretty complex bug so it's hard for us to help there.

Reinmar on 11 Jan 2019

We are at the point that looking for a good HTML editor in our new application and we like CKEditor 5.
CRA 1 is not an option for us and I would rather not eject.
I saw the custom solution react-app-rewired.
Can this be used and if so, how to configure?

iexplore on 11 Jan 2019

👍1

It seems that react-app-rewired could be a solution, but from its README I read that it's rather dying. Its author mentions other solutions, in fact:

Note: I personally use next.js or Razzle which both support custom Webpack out of the box.

Anyway, you should be able to avoid ejecting your config when using this package. It may not be future-safe, but should work.

However, I started thinking – assuming that you're using a custom CKEditor 5 build (instead of integrating from source) the only reason why you can't use that CKE5 build with CRA2 without ejecting right now is https://github.com/babel/babel/issues/8913. What if we change the source code of CKEditor 5 to avoid this bug? We actually did that in the past already.

@pomek could you look into this? It won't unblock using CKE5 from source in CRA apps, but it will make using builds possible.

Reinmar on 21 Jan 2019

I've just stumbled upon https://github.com/facebook/create-react-app/issues/5387#issuecomment-440690443 by @eugene-kovaljov:

The another possible temporary approach with avoiding the ejection of CRA is to use ClassicEditor as static asset (via script tag in index.html)

My understanding is that it will allow using a custom CKE5 build even in a non-ejected CRA2.

Reinmar on 22 Jan 2019

If that works it could be a possibilty. The main disadvantage of using it as a static asset is the it can't be lazy-loaded. In our case only most users won't use the editor.

I quess Razzle is also a possibilty although CRA is much more supported.

iexplore on 22 Jan 2019

@Reinmar, in fact, the fix is really simple.

The described issue touches this part of our code: https://github.com/ckeditor/ckeditor5-utils/blob/5978e4c62580d2691c6689ee17db4fbeba465159/src/emittermixin.js#L240-L248

We can replace it with:

events.forEach( eventName => {
    const destinations = this._delegations.get( eventName );

    if ( !destinations ) {
        this._delegations.set( eventName, new Map( [ [ emitter, nameOrFunction ] ] ) );
    } else {
        destinations.set( emitter, nameOrFunction );
    }
} );

Does the same and works the same as the original code and thanks to that, CRA works without errors.

pomek on 22 Jan 2019

👍2

Cool! Let's go for it :) Can you make a PR (in ckeditor5-utils as well as in the react integration guide, because we'll not need that warning anymore).

Reinmar on 23 Jan 2019

pomek on 23 Jan 2019

I've just merged the fix, but note that it won't work with NPM's builds until we release new versions of ckeditor5-* packages (Especially the ckeditor5-utils).

ma2ciek on 25 Jan 2019

❤3

I've just merged the fix, but note that it won't work with NPM's builds until we release new versions of ckeditor5-* packages (Especially the ckeditor5-utils).

I couldn't find when are you planning to release the next NPM build. There is any date? I would like to start using it in my production React project, and probably start to contribute with plugins soon!

murilocruz on 20 Feb 2019

Hi @murilocruz!

I couldn't find when are you planning to release the next NPM build. There is any date? I would like to start using it in my production React project, and probably start to contribute with plugins soon!

We plan to ship new NPM versions within a week, so stay tuned 🙂

ma2ciek on 20 Feb 2019

👀1

Any updates on this? Hurts to try to use a commercial product and it no workee :)

makis-spy on 26 Feb 2019

Got the same issue. And the only way i can do is to wait

luongs3 on 27 Feb 2019

Hi @murilocruz!

I couldn't find when are you planning to release the next NPM build. There is any date? I would like to start using it in my production React project, and probably start to contribute with plugins soon!

We plan to ship new NPM versions within a week, so stay tuned

2 hours left before I'm officially disappointed! More seriously it looks like a lot of people are waiting for this, can we have any update?