Cannot integrate CKEditor 5 with React

[eleumasc]

I am desperately trying to integrate CKEditor 5 with React, but it doesn't work. I have strictly followed the docs: I am aware of the Babel bug, I have tried to create the React app with both the versions 1 and 2 of create-react-app, I have tried to replace some parts of the ejected configuration (as specified in the relative issue facebook/create-react-app#5387), but none of these attempts have made my app work. The error is always the same: TypeError: Cannot read property '0' of undefined. I also noticed that in the WebPack configuration file Tenser is used as minification tool, not Uglify.

> node -v
8.12.0
> npm -v
6.4.1

[Reinmar]

I also noticed that in the WebPack configuration file Tenser is used as minification tool, not Uglify.

Do you mean a config file ejected from CRA2? Perhaps they switched to Tenser sooner than Webpack managed to do so. Interesting.

@ma2ciek, where did they discuss those recent performance issues and switching to Tenser? I can't find the link now :(

General ticket regarding compatibility with CRA2: #40

[Reinmar]

@ma2ciek, where did they discuss those recent performance issues and switching to Tenser? I can't find the link now :(

Got it: facebook/react#13987

[pomek]

@eleumasc, could you share your webpack configuration? It the error still appears, it may mean that something is wrong with webpack.

[eleumasc]

Here it is: config.zip

[pomek]

Are you working on a Windows or Unix operating system? I am asking because your configuration works fine for me. If you're working on Windows, you should use the following RegExp for CKEditor 5 Builds:

/@ckeditor[\\/]ckeditor5-build-.*/

[eleumasc]

Effectively I am working on Windows, and now it works! I can't believe that the same WebPack configuration doesn't work equally on Windows like on Linux.
Anyway, very thanks!

[bastilavarias]

Hello .. I also used that configuration but CKEditor 5 with React still wont' work

here's my config:

{
            test: /\.(js|mjs)$/,
            exclude: [/@ckeditor[\\/]ckeditor5-build-.*/],
            loader: require.resolve('babel-loader'),
            options: {
              babelrc: false,
              configFile: false,
              compact: false,
              presets: [
                [
                  require.resolve('babel-preset-react-app/dependencies'),
                  { helpers: true },
                ],
              ],
              cacheDirectory: true,
              // Don't waste time on Gzipping the cache
              cacheCompression: false,

              // If an error happens in a package, it's possible to be
              // because it was compiled. Thus, we don't want the browser
              // debugger to show the original code. Instead, the code
              // being evaluated would be much more helpful.
              sourceMaps: false,
            },
          },