OrchardCMS/OrchardCore · error · TypeError

Invalid attempt to destructure non-iterable instance. In…

Error message

Invalid attempt to destructure non-iterable instance.
In order to be iterable, non-array objects must have a [Symbol.iterator]() method.

What it means

This TypeError comes from Babel's _slicedToArray/_nonIterableRest helper in the vuedraggable UMD bundle. Destructuring with array pattern (const [a, b] = x) was applied to a value that is not iterable (null, undefined, or a plain object without [Symbol.iterator]). The library's compiled code destructures array-like results, so the input was not the expected array.

Solutions

Ensure any values/options passed to draggable are complete, correctly-typed arrays/strings
Replace hand-edited vendored bundles with the pristine published vuedraggable 2.24.3 file
Check that data bound to the component is initialized before first render
Use the ESM build (vuedraggable.common.js / vue.draggable.next) appropriate for your Vue version

Example fix

// before
const [name, value] = maybeNull; // maybeNull is null -> TypeError

// after
const [name, value] = Array.isArray(maybeNull) ? maybeNull : [];

Defensive patterns

Strategy: type-guard

Validate before calling

if (!Array.isArray(result)) result = []; const [a, b] = result;

Type guard

function asArray(v) { return Array.isArray(v) ? v : (v && typeof v[Symbol.iterator] === 'function' ? Array.from(v) : []); }

Try / catch

try { const [x, y] = value; } catch (e) { if (e instanceof TypeError && /non-iterable/.test(e.message)) { value = []; } else { throw e; } }

Prevention

Initialize all data bound to draggable before render
Never hand-edit vendored bundles
Default-destructure: const [a = null, b = null] = value ?? []
Use the build matching your Vue/module system

When it happens

Trigger: Code inside the bundle (or its SortableJS dependency) destructuring a function result that returned null/undefined or an object instead of an array, e.g. parsing a value with a regex or splitting a value that isn't a string, then doing const [m1, m2] = result.

Common situations: Feeding undefined/null data into draggable options that get destructured internally; mismatched vuedraggable version vs Vue causing internal helpers to receive wrong shapes; corrupted vendored UMD bundle edited by hand.

Understand the failure class

Background: Type mismatch errors: IllegalArgumentException, TypeError and type guards across 150 open-source libraries — this error's family across 150 libraries.

Related errors

AI-assisted analysis of OrchardCMS/OrchardCore@4306c0717f (2026-09-13). Data as JSON: /api/errors/0b6b611fa09fb031. Report an issue: GitHub.

Appendix: source

Thrown at src/OrchardCore.Modules/OrchardCore.Resources/wwwroot/Vendor/vue-draggable-2.24.3/vuedraggable.umd.js:1879

  for (var i = 0, arr2 = new Array(len); i < len; i++) {
    arr2[i] = arr[i];
  }

  return arr2;
}
// CONCATENATED MODULE: ./node_modules/@babel/runtime/helpers/esm/unsupportedIterableToArray.js

function _unsupportedIterableToArray(o, minLen) {
  if (!o) return;
  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
  var n = Object.prototype.toString.call(o).slice(8, -1);
  if (n === "Object" && o.constructor) n = o.constructor.name;
  if (n === "Map" || n === "Set") return Array.from(o);
  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
}
// CONCATENATED MODULE: ./node_modules/@babel/runtime/helpers/esm/nonIterableRest.js
function _nonIterableRest() {
  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
// CONCATENATED MODULE: ./node_modules/@babel/runtime/helpers/esm/slicedToArray.js




function _slicedToArray(arr, i) {
  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
}
// EXTERNAL MODULE: ./node_modules/core-js/modules/es7.array.includes.js
var es7_array_includes = __webpack_require__("6762");

// EXTERNAL MODULE: ./node_modules/core-js/modules/es6.string.includes.js
var es6_string_includes = __webpack_require__("2fdb");

// CONCATENATED MODULE: ./node_modules/@babel/runtime/helpers/esm/arrayWithoutHoles.js

function _arrayWithoutHoles(arr) {

View on GitHub (pinned to 4306c0717f)