New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cannot use minified library written ES6 in RCA #5387

Open
pomek opened this Issue Oct 10, 2018 · 5 comments

Comments

Projects
None yet
5 participants
@pomek

pomek commented Oct 10, 2018

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.

image

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 git@github.com: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!

image

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

Reproducible Demo

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

@pomek

This comment has been minimized.

pomek commented Oct 12, 2018

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.

@Timer Timer added this to the 2.0.x milestone Oct 14, 2018

@Reinmar

This comment has been minimized.

Reinmar commented Oct 16, 2018

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

This comment has been minimized.

pomek commented Oct 22, 2018

Reported to Babel team (babel/babel#8913). Not sure if I should close this issue.

@noahjohn9259

This comment has been minimized.

noahjohn9259 commented Nov 16, 2018

this works for me.

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

This comment has been minimized.

eugene-kovaljov commented Nov 21, 2018

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment