Create-react-app: Cannot use minified library written ES6 in RCA

[pomek]

Is this a bug report?

Yes.

Did you try recovering your dependencies?

Yes.

Which terms did you search for in User Guide?

I didn't find anything that could help me. I was searching for something that allows me to disable transpiling a library that was written ES6 and also minified.

Environment

node -v
v10.11.0

npm -v
6.4.1

Steps to Reproduce

Clone a demo (on the bottom of this comment) or follow steps listed below:

1. Create an example app: npx create-react-app my-app
2. Install CKEditor 5 dependencies: npm install @ckeditor/ckeditor5-react @ckeditor/ckeditor5-build-classic
3. Replace src/App.js with:

import React, { Component } from 'react';
import CKEditor from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import './App.css';

class App extends Component {
    render() {
        return (
            <div className="App">
                <CKEditor
                    editor={ClassicEditor}
                    data="<p>Hello from CKEditor 5!</p>"
                    onInit={editor => {
                        // You can store the "editor" and use when it's 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;

1. npm start

Expected Behavior

The application works, the dev-tools console does not contain any error.

Actual Behavior

A blank page and the following error in the console.

Additional informations

I wanted to check whether it will work if ckeditor5-build-classic won't be minified so I did steps specified below:

1. Go to @ckeditor namespace in dependencies: cd node_modules/@ckeditor
2. Remove ckeditor5-build-classic installed from npm: rm -r ckeditor5-build-classic
3. Clone package from GitHub and check out to the proper version: git clone -b v11.1.0 [email protected]:ckeditor/ckeditor5-build-classic.git
4. Go to the package and install dependencies: cd ckeditor5-build-classic && npm i
5. Build the package in development mode: ./node_modules/.bin/webpack --mode development
6. Go back to your application and call npm start again.

It works!

The question is - why doesn't minified build work?

Reproducible Demo

https://github.com/pomek/react-app

[pomek]

After ejecting the configuration and excluding ckeditor5-builds from babel-loader, the application seems to work.

          {
            test: /\.(js|mjs)$/,
            exclude: [
-             /@babel(?:\/|\\{1,2})runtime/ 
+             /@babel(?:\/|\\{1,2})runtime/,
+             /@ckeditor\/ckeditor5-build-.*/
            ],
            loader: require.resolve('babel-loader'),

But there should be a simpler solution that allows disabling it.

[Reinmar]

Doesn't the above mean that this is Babel's bug? That running Babel on CKEditor 5 minified build leads to an error?

I'd recommend passing CKEditor 5 minified build via some reasonable Babel preset and checking if it still works. If not, we should report a bug to Babel's team directly.

Additionally, wouldn't it be a bit more optimal (for build times but also for avoiding issues like this) if CRA allowed configuring which libs need to be transpiled? Or perhaps, if it's feasible, if that was automated somehow?

[pomek]

Reported to Babel team (https://github.com/babel/babel/issues/8913). Not sure if I should close this issue.

[noahjohn9259]

this works for me.

{
            test: /\.(js|mjs)$/,
            exclude: [/@babel(?:\/|\\{1,2})runtime/, /@ckeditor.*/],
            loader: require.resolve("babel-loader"),

[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)

[pomek]

We released new versions of our builds. We change a little our source and this issue is no longer valid.