Problem

I’ve been getting some mysterious errors in the “uncontrolled” mode of my Code Editing component built with AceEditor. It happens in an anonymous function and doesn’t provide much information. I’ve narrowed it down to see that it occurs when I pass in a mode prop to the Ace Editor. But I can’t decipher it further than that.

My dependencies:

"brace": "0.11.1",
"react": "16.4.2",
"react-ace": "6.3.2",

The exact text of the error is this:

index.js:18058 {message: "Uncaught TypeError: Cannot read property 'substring' of undefined", data: undefined, file: "blob:http://localhost:8070/e57cc920-a648-4d98-b50a-056519dcb0b7", line: 1, col: 9574, …}col: 9574data: undefinedfile: "blob:http://localhost:8070/e57cc920-a648-4d98-b50a-056519dcb0b7"line: 1message: "Uncaught TypeError: Cannot read property 'substring' of undefined"stack: "TypeError: Cannot read property 'substring' of undefined↵    at exports.applyDelta (blob:http://localhost:8070/e57cc920-a648-4d98-b50a-056519dcb0b7:1:9574)↵    at Document.applyDelta (blob:http://localhost:8070/e57cc920-a648-4d98-b50a-056519dcb0b7:1:21858)↵    at Array.<anonymous> (blob:http://localhost:8070/e57cc920-a648-4d98-b50a-056519dcb0b7:1:26690)↵    at Sender.EventEmitter._signal (blob:http://localhost:8070/e57cc920-a648-4d98-b50a-056519dcb0b7:1:10664)↵    at window.onmessage (blob:http://localhost:8070/e57cc920-a648-4d98-b50a-056519dcb0b7:1:3542)"__proto__: Object
reportError @ index.js:18058
onMessage @ index.js:18049
16:05:05.710 blob:http://localhost:8070/e57cc920-a648-4d98-b50a-056519dcb0b7:1 Uncaught TypeError: Cannot read property 'substring' of undefined
    at exports.applyDelta (blob:http://localhost:8070/e57cc920-a648-4d98-b50a-056519dcb0b7:1)
    at Document.applyDelta (blob:http://localhost:8070/e57cc920-a648-4d98-b50a-056519dcb0b7:1)
    at Array.<anonymous> (blob:http://localhost:8070/e57cc920-a648-4d98-b50a-056519dcb0b7:1)
    at Sender.EventEmitter._signal (blob:http://localhost:8070/e57cc920-a648-4d98-b50a-056519dcb0b7:1)
    at window.onmessage (blob:http://localhost:8070/e57cc920-a648-4d98-b50a-056519dcb0b7:1)
exports.applyDelta @ blob:http://localhost:8070/e57cc920-a648-4d98-b50a-056519dcb0b7:1
applyDelta @ blob:http://localhost:8070/e57cc920-a648-4d98-b50a-056519dcb0b7:1
(anonymous) @ blob:http://localhost:8070/e57cc920-a648-4d98-b50a-056519dcb0b7:1
EventEmitter._signal @ blob:http://localhost:8070/e57cc920-a648-4d98-b50a-056519dcb0b7:1
window.onmessage @ blob:http://localhost:8070/e57cc920-a648-4d98-b50a-056519dcb0b7:1

Here’s a repro case:

Component:

import React, { Component } from 'react';
import AceEditor from 'react-ace';
import 'brace/mode/json';

export default class CodeEditor2 extends Component {
	constructor(props) {
		super(props);
		this.state = {
			codeValue: props.value || '',
		};
		this.updateValue = this.updateValue.bind(this);
	}

	updateValue(value) {
		this.setState({
			codeValue: value,
		});
		this.props.onChange && this.props.onChange(value);
	}

	render() {
		const { value, onChange, ...aceProps } = this.props;

		return (
			<div>
				<AceEditor
					onChange={this.updateValue}
					value={value || this.state.codeValue}
					{...aceProps}
				/>
			</div>
		);
	}
}

Container:

import React, { Component } from 'react';
import CodeEditor2 from "../../../src/components/code_editor/code_editor_2";

export default class Sandbox extends Component {
	constructor(props) {
		super(props);
		this.state = {
			codeValue: '{}',
		};
		this.onCodeChange = this.onCodeChange.bind(this);
	}

	onCodeChange(value) {
		this.setState({
			codeValue: value,
		});
	}

	render() {
		return (
			<div>
				<CodeEditor2
					onChange={this.onCodeChange}
					value={this.state.codeValue}
					mode="json"
				/>
			</div>
		);
	}
}

I’ve spent hours trying to figure out what I’m doing wrong, and just can’t figure it out. Is this a bug?