What causes "ace.edit can't find div #" in ajaxorg/ace?

Ensure the div with that exact id exists in the DOM before calling ace.edit

ajaxorg/ace · error · Error

ace.edit can't find div #

Error message

ace.edit can't find div #

What it means

ace.edit() looks up the target element by id when given a string. If document.getElementById returns nothing, Ace cannot attach an editor and throws immediately instead of failing silently later.

Source

Thrown at src/ace.js:40

require("./mode/folding/fold_mode");
require("./theme/textmate");
require("./ext/error_marker");

exports.config = require("./config");


/**
 * Embeds the Ace editor into the DOM, at the element provided by `el`.
 * @param {String | HTMLElement & {env?: any, value?: any} | null} [el] Either the id of an element, or the element itself
 * @param {Partial<import("../ace-internal").Ace.EditorOptions> } [options] Options for the editor
 * @returns {Editor}
 **/
exports.edit = function(el, options) {
    if (typeof el == "string") {
        var _id = el;
        el = document.getElementById(_id);
        if (!el)
            throw new Error("ace.edit can't find div #" + _id);
    }

    if (el && el.env && el.env.editor instanceof Editor)
        return el.env.editor;

    var value = "";
    if (el && /input|textarea/i.test(el.tagName)) {
        var oldNode = el;
        value = oldNode.value;
        el = dom.createElement("pre");
        oldNode.parentNode.replaceChild(el, oldNode);
    } else if (el) {
        value = el.textContent;
        el.innerHTML = "";
    }

    var doc = exports.createEditSession(value);
    var editor = new Editor(new Renderer(el), doc, options);

View on GitHub (pinned to 2c1eddc392)

Solutions

Ensure the div with that exact id exists in the DOM before calling ace.edit
Defer ace.edit until DOMContentLoaded or framework mount lifecycle (e.g. useEffect/useDidUpdate)
Pass the element itself instead of a string to avoid lookup issues
Verify the id string has no typos, leading '#', or stale references

Example fix

// before
const editor = ace.edit("editor"); // DOM not ready
// after
document.addEventListener('DOMContentLoaded', function() {
  const editor = ace.edit(document.getElementById('editor'));
});

Defensive patterns

Strategy: validation

Validate before calling

function canEdit(selectorOrEl) {
  var el = typeof selectorOrEl === 'string' ? document.getElementById(selectorOrEl) : selectorOrEl;
  return !!el && el instanceof HTMLElement;
}
if (!canEdit('editor')) throw new Error('editor container missing');
const editor = ace.edit('editor');

Type guard

function isDomElement(el) { return typeof el === 'object' && el !== null && el.nodeType === 1; }

Try / catch

try { editor = ace.edit('editor'); } catch (e) { if (/ace.edit can't find div/.test(e.message)) { /* create container or retry after mount */ } else throw e; }

Prevention

Call ace.edit after DOMContentLoaded or framework mount hook
Pass the element reference instead of an id string
Keep container divs stable in SPAs; re-create the editor when remounted
Never prefix the id with '#'

When it happens

Trigger: Calling ace.edit("myEditor") when no element with that id exists, the script runs before DOM ready, the id is misspelled, or the element was removed/replaced before edit() is called.

Common situations: Loading ace.js in <head> before the body renders; single-page apps re-rendering and destroying the host div; typos in the id; calling ace.edit inside frameworks before the container mounts.

Related errors

Textarea required!

AI-assisted analysis of ajaxorg/ace@2c1eddc392 (2026-08-30). Data as JSON: /api/errors/e5068d4842ebdda8. Report an issue: GitHub.