question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Cannot use minified library written ES6 in RCA

See original GitHub issue

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

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:12
  • Comments:6

github_iconTop GitHub Comments

5reactions
eugene-kovaljovcommented, 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)

2reactions
nhjhncbcommented, Nov 16, 2018

this works for me.

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

github_iconTop Results From Across the Web

Failed to minify the code from this file - Stack Overflow
I have already tried publishing my library using ES6 export / import commands. The full source code of my library (it's just these...
Read more >
Let's Write a JavaScript Library in ES6 using Webpack and ...
In this blog we will learn how to create our own webpack configuration to bundle a small JavaScript utility library using webpack and...
Read more >
cinos81/rca - Docker Image | Docker Hub
Builds the app for production to the build folder. It correctly bundles React in production mode and optimizes the build for the best...
Read more >
How to use an ES6 import in Node.js? - GeeksforGeeks
In the package.json file add “type” : “module”. Adding this enables ES6 modules. The package.json file should look like this:.
Read more >
How to write and build JS libraries in 2018 - Medium
Use ES6 modules and don't care about. Don't build it. Webpack will do all work for you. Just besure that all external dependencies...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found