Using a Brace mode causes Uncaught Type Error

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?

[PrimeObjects]

Any fix to it?

[livyk]

I found the way how to fix similar problem with react-hook-form. The main problem is the react-hook-form state (or any external state) and AceEditor state (internal state) became out of sync after onChange. When onChange happened, AceState already have new value, but external state (value prop) can’t update for a few renders and still equal to previous value. This is cause of the error. So that’s how I fixed it.

export function AceAdapter({ field: { value, onChange } }) {
  const [lastStringValue, setLastStringValue] = useState(value)

  const handleChange = useCallback((newValue) => {
    setLastStringValue(newValue)
    onChange(newValue)
  }, [onChange])

  useEffect(() => {
    setLastStringValue(value)
  }, [value])

   return (
      <AceEditor
         value={lastStringValue}
         onChange={handleChange}
       />
    )
}