TypeError: null is not an object (evaluating 'this.doc.getLength')

[MrStashley]

Problem

I'm getting the following error on line 7772 of ace.js in BackgroundTokenizer.prototype.start

TypeError: null is not an object (evaluating 'this.doc.getLength')

It seems like this is happening on EditSession.prototype.$onChangeMode

I have 3 editor components on my page and I get the error for all 3, including html, javascript, and css modes

I'm using vite + react, and here is my relevant code:

import AceEditor from 'react-ace';
import {config} from "ace-builds"

import modeJavascript from "ace-builds/src-noconflict/mode-javascript?url";
import modeHTML from "ace-builds/src-noconflict/mode-html?url";
import modeCSS from "ace-builds/src-noconflict/mode-css?url";
import themeCloudEditorDark from "ace-builds/src-noconflict/theme-cloud_editor_dark?url"
import { getStringFromLanguageType } from "./utils/constants";

config.set('basePath', 'https://cdnjs.cloudflare.com/ajax/libs/ace/1.36.2/')
config.setModuleUrl('ace/mode/javascript', modeJavascript)
config.setModuleUrl('ace/mode/html', modeHTML)
config.setModuleUrl('ace/mode/css', modeCSS)
config.setModuleUrl('ace/theme/cloud_editor_dark', themeCloudEditorDark)

<AceEditor 
    mode={editorMode}
    theme="cloud_editor_dark"
    className="code-input"
    value={this.state.code} 
    onChange={this.handleTextAreaChange.bind(this)}
    ref={this.aceEditorRef}
    wrapEnabled={true}
    editorProps={{ $blockScrolling: true }}
    setOptions={{
        showLineNumbers:false,
        showGutter:false,
    }}
/>

Not sure what the solution is, I'm thinking it might be an import / version issue, or an issue with vite, but also it could definitely be a bug. It seems like the error happens after the parent React Component gets componentDidMount, so I don't think it's related to memory not being initialized yet, perhaps it's something to do with variables getting freed too soon