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.

for...of array optimization can introduce conflicting variables into the scope

See original GitHub issue

Bug Report

Initially, I reported this bug here – https://github.com/facebook/create-react-app/issues/5387 – because I thought that something is broken in CRA. After further investigation, I found a bug in the Babel so here I am.

Current Behavior

The following error.

index.js:5 TypeError: Cannot read property '0' of undefined
    at Object.to (index.js:5)
    at new t (index.js:5)
    at new t (index.js:5)
    at new t (index.js:5)
    at e.t (index.js:5)
    at e (index.js:5)
    at new e (index.js:5)
    at index.js:5
    at new Promise (<anonymous>)
    at Function.value (index.js:5)
(anonymous) @ index.js:5
Promise.catch (async)
(anonymous) @ index.js:5
n @ index.js:1
(anonymous) @ index.js:5
n @ index.js:1
(anonymous) @ index.js:1
(anonymous) @ index.js:1

Input Code

I prepared a repository that allows reproducing the issue: https://github.com/pomek/react-app/tree/babel

#master branch is reserved for CRA, this bug was committed to the #babel branch.

But in order to speed up resolving the issue, I’ll describe everything in the issue as well.

Here is my ./src/index.js:

import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

ClassicEditor.create( document.getElementById( 'editor' ) )
	.then( editor => {
		console.log( 'Ready to use!', editor );
	} )
	.catch( err => {
		console.error( err );
	} );

and ./dist/index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>CKEditor 5 – classic editor build – development sample</title>
    <style>
        body {
            max-width: 800px;
            margin: 20px auto;
        }
    </style>
</head>
<body>

<h1>CKEditor 5 – classic editor build – development sample</h1>

<div id="editor">
    <h2>Sample</h2>

    <p>This is an instance of the <a href="https://ckeditor.com/docs/ckeditor5/latest/builds/guides/overview.html#classic-editor">classic editor build</a>.</p>

    <p>You can use this sample to validate whether your <a href="https://ckeditor.com/docs/ckeditor5/latest/builds/guides/development/custom-builds.html">custom build</a> works fine.</p>
</div>

<script src="./index.js"></script>

</body>
</html>

Expected behavior/code

An application should work:

The working editor screen.

Babel Configuration (.babelrc, package.json, cli command)

I’m using Webpack to build the app:

./webpack.config.js

module.exports = {
	context: __dirname,
	entry: [
		'@babel/polyfill',
		'./src/index.js'
	],
	output: {
		filename: './index.js'
	},

	module: {
		rules: [
			{
				test: /\.js/,
				use: {
					loader: 'babel-loader',
					options: {
						presets: [
							[ '@babel/preset-env', {
								targets: {
									ie: 9,
								},
								ignoreBrowserslistConfig: true,
								useBuiltIns: false,
								modules: false,
								exclude: [ 'transform-typeof-symbol' ],
							} ]
						]
					}
				}
			}
		]
	}
};

Webpack’s config looks similar to config used by CRA: https://github.com/facebook/create-react-app/blob/7ba343c187744d077b49cfd3b68b805e497bf3ac/packages/babel-preset-react-app/dependencies.js#L83-L103

./package.json

{
  "name": "react-app",
  "version": "1.0.0",
  "description": "",
  "dependencies": {
    "@ckeditor/ckeditor5-build-classic": "^11.1.1"
  },
  "devDependencies": {
    "@babel/cli": "^7.1.2",
    "@babel/core": "^7.1.2",
    "@babel/polyfill": "^7.0.0",
    "@babel/preset-env": "^7.1.0",
    "@babel/runtime": "^7.1.2",
    "babel-loader": "^8.0.4",
    "webpack": "^4.20.2",
    "webpack-cli": "^3.1.2"
  },
  "scripts": {
    "build": "webpack --mode=production"
  }
}

After installing dependencies, calling npm run build and opening ./dist/index.html you should have a working editor. Unfortunately, you’ll end with the error.

Environment

Babel version(s): 7.1.2 (?)
Node/npm version: 10.12.0 / 6.4.1
OS: 20:13:40Darwin MacBook-Pro.local 18.0.0 Darwin Kernel Version 18.0.0: Wed Aug 22 20:13:40 PDT 2018; root:xnu-4903.201.2~1/RELEASE_X86_64 x86_64
How you are using Babel: loader

Possible Solution

Is no a solution but I wanted to check whether it will work if ckeditor5-build-classic won’t be minified so I did steps specified below:

Go to @ckeditor namespace in dependencies: cd node_modules/@ckeditor
Remove ckeditor5-build-classic installed from npm: rm -r ckeditor5-build-classic
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
Go to the package and install dependencies: cd ckeditor5-build-classic && npm i
Build the package in development mode: ./node_modules/.bin/webpack --mode development
Go back to your application and call npm run build again.