Does not work with react-scripts 2.0.4

[desaifly]

I upgraded react-scripts to 2.0.4 and Ckeditor stopped working. It produces empty div. Following are package.json and react component.

package.json:

{
  "name": "blank",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@ckeditor/ckeditor5-build-classic": "^11.0.1",
    "@ckeditor/ckeditor5-react": "^1.0.0-beta.1",
    "react": "^16.5.2",
    "react-dom": "^16.5.2",
    "react-router-dom": "^4.3.1",
    "react-scripts": "^2.0.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

Simple react code:

import * as React from 'react';
import { HashRouter} from 'react-router-dom';
import CKEditor from '@ckeditor/ckeditor5-react';
import BalloonEditor from '@ckeditor/ckeditor5-build-classic';


export class Main extends React.Component {
    constructor(props) {
        //console.log( ' IN THE Constructor' );
        super(props);
                
    }

    render() {
                return (
            
            <HashRouter>
                <div className="container d-flex flex-column">
                    <div>CKEditor:
                        
                    <CKEditor editor={BalloonEditor} data={'Test Test Test'}
                    />
                    </div>

                </div>
            </HashRouter>
        );

    }

}

[pomek]

It does not work because RCA transpiling an application to ES5. I'm trying to resolve the issue but at this moment I don't have any working solution.

[pomek]

But would be good to see your error from the console. You may have something other than me and my assumption could be incorrect.

[desaifly]

One of the issue I faced was that, the code compiles without any error in start and build mode. The only way to notice the change is the empty div.

Since you asked, I was looking for error and found an error in the declaration.

I thought react-scripts 2.0.x supports ES6.

[ma2ciek]

Hi @desaifly,

You posted a TypeScript error and I guess it's not connected to the react-scripts library. If you're using TypeScript + React, you should add an empty declaration for the ckeditor5-react as we do not support TypeScript's typings at this moment.

[ma2ciek]

Or it's just a prompt from your IDE that supports TypeScript.

[desaifly]

Hi @ma2ciek

Your second comment is correct. This is a prompt from VS Code. I opened the project in the Atom IDE and does not show the error.

[pomek]

So, an important question is – does your application work correctly? Can you open a browser and see the editor?

[desaifly]

My rest of the app works fine. I also created a new react project with only Ckeditor. It works fine if I use react-script 1.5.1; however when I upgraded to 2.0.4, the console gave following error.

TypeError: Cannot read property '0' of undefined
    at Object.to (ckeditor.js:1276)
    at new Rs (ckeditor.js:12540)
    at new Ru (ckeditor.js:21738)
    at new Gu (ckeditor.js:22818)
    at Wb.Yu (ckeditor.js:23106)
    at Wb.Uh (ckeditor.js:25015)
    at new Wb (ckeditor.js:33718)
    at ckeditor.js:25053
    at new Promise (<anonymous>)
    at Function.create (ckeditor.js:25052)
    at t.value (ckeditor.js:136)
    at t.value (ckeditor.js:115)
    at commitLifeCycles (react-dom.development.js:15354)
    at commitAllLifeCycles (react-dom.development.js:16703)
    at HTMLUnknownElement.callCallback (react-dom.development.js:144)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:193)
    at invokeGuardedCallback (react-dom.development.js:243)
    at commitRoot (react-dom.development.js:16879)
    at completeRoot (react-dom.development.js:18335)
    at performWorkOnRoot (react-dom.development.js:18257)
    at performWork (react-dom.development.js:18159)
    at performSyncWork (react-dom.development.js:18132)
    at requestWork (react-dom.development.js:18009)
    at scheduleWork (react-dom.development.js:17802)
    at scheduleRootUpdate (react-dom.development.js:18523)
    at updateContainerAtExpirationTime (react-dom.development.js:18549)
    at updateContainer (react-dom.development.js:18580)
    at ReactRoot.push../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render (react-dom.development.js:18862)
    at react-dom.development.js:19016
    at unbatchedUpdates (react-dom.development.js:18397)
    at legacyRenderSubtreeIntoContainer (react-dom.development.js:19012)
    at Object.render (react-dom.development.js:19076)
    at Module../src/index.js (index.js:8)
    at __webpack_require__ (bootstrap:782)
    at fn (bootstrap:150)
    at Object.0 (registerServiceWorker.js:117)
    at __webpack_require__ (bootstrap:782)
    at checkDeferredModules (bootstrap:45)
    at Array.webpackJsonpCallback [as push] (bootstrap:32)
    at main.chunk.js:1
function.console.(anonymous function) @ index.js:1452
(anonymous) @ ckeditor.js:141

[pomek]

See facebook/create-react-app#5387.

I have the same error. Unfortunately, I don't have any idea how to resolve it at this moment.

[Reinmar]

Let's continue this thread in #40 because these are duplicates.