ajaxorg/ace · error · Error

Textarea required!

Error message

Textarea required!

What it means

The ext/textarea compatibility layer transforms an existing <textarea> into an Ace editor. setupContainer() requires the passed element be a textarea; any other element type throws because the API depends on textarea semantics (value, form submission).

Source

Thrown at src/ext/textarea.js:85

    if (!ret || ret == 'auto' || ret == 'intrinsic') {
        ret = container.style[property];
    }
    return ret;
};

/**
 * @param {HTMLElement} elm
 * @param {Object} styles
 */
function applyStyles(elm, styles) {
    for (var style in styles) {
        elm.style[style] = styles[style];
    }
}

function setupContainer(element, getValue) {
    if (element.type != 'textarea') {
        throw new Error("Textarea required!");
    }

    var parentNode = element.parentNode;

    // This will hold the editor.
    var container = document.createElement('div');

    // To put Ace in the place of the textarea, we have to copy a few of the
    // textarea's style attributes to the div container.
    //
    // The problem is that the properties have to get computed (they might be
    // defined by a CSS file on the page - you can't access such rules that
    // apply to an element via elm.style). Computed properties are converted to
    // pixels although the dimension might be given as percentage. When the
    // window resizes, the dimensions defined by percentages changes, so the
    // properties have to get recomputed to get the new/true pixels.
    var resizeEvent = function() {
        var style = 'position:relative;';

View on GitHub (pinned to 2c1eddc392)

Solutions

  1. Pass an actual <textarea> element to the transform function
  2. Check element.tagName/type before calling
  3. Use the standard ace.edit() API with a div instead if you don't need textarea compatibility

Example fix

// before
transformTextarea(document.getElementById('editorDiv')); // a div
// after
transformTextarea(document.getElementById('editorTa')); // <textarea id="editorTa"></textarea>
Defensive patterns

Strategy: validation

Validate before calling

var el = document.getElementById('editorTa');
if (!el || el.type !== 'textarea') throw new Error('need a <textarea>');
ace.require('ace/ext/textarea').transformTextarea(el);

Type guard

function isTextarea(el) { return el != null && el.tagName === 'TEXTAREA' && el.type === 'textarea'; }

Try / catch

try { transformTextarea(el); } catch (e) { if (/Textarea required/.test(e.message)) { /* replace el with a real <textarea> */ } else throw e; }

Prevention

When it happens

Trigger: Calling ace.require('ace/ext/textarea').transformTextarea(divOrInput) with a non-textarea element, or a textarea created after load whose .type isn't 'textarea'.

Common situations: Passing a div or input element instead of <textarea>; using the extension on dynamically created containers where the wrong node was selected.

Related errors

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