OrchardCMS/OrchardCore · error · TypeError

Invalid attempt to spread non-iterable instance. In order…

Error message

Invalid attempt to spread 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 _toConsumableArray/_iterableToArray helpers inside the vuedraggable bundle. vuedraggable (or code using it) tried to spread a value with '...' that is neither an array nor an iterable (no [Symbol.iterator] method). Typical root cause is passing null/undefined or a plain object where an array of list items is expected.

Solutions

Ensure the list/value prop is always an initialized array: list: [] instead of null
Guard rendering with v-if="Array.isArray(items)" until data is loaded
Normalize incoming data with Array.from(value ?? []) before passing it to draggable
Upgrade to vuedraggable/SortableJS version matching your Vue major version (vue.draggable.next for Vue 3)

Example fix

// before
<draggable :list="items" ...>
// items may be undefined while loading

// after
<draggable v-if="Array.isArray(items)" :list="items" ...>
// or items = Array.from(apiResponse ?? [])

Defensive patterns

Strategy: type-guard

Validate before calling

if (!Array.isArray(items)) { items = []; } // before passing :list="items"

Type guard

function isList(v) { return Array.isArray(v) || (v && typeof v[Symbol.iterator] === 'function'); }

Try / catch

try { renderList(toConsumableArray(items)); } catch (e) { if (e instanceof TypeError && /non-iterable/.test(e.message)) { items = []; } else { throw e; } }

Prevention

Always initialize list props with []
v-if on Array.isArray before mounting draggable
Normalize API responses with Array.from/Array.isArray
Match vuedraggable version to your Vue major

When it happens

Trigger: Passing a non-array value to the draggable's 'list' or 'value' prop (e.g. null, undefined, or an object) so the component spreads it with toConsumableArray; spreading the result of cloneDeep/getValue when it returns a non-iterable.

Common situations: Initialising the bound list asynchronously and rendering <draggable> before data arrives; binding list to a Vuex/axios response object instead of an array; Vue 3/projects where vuedraggable 2.x internals receive proxy objects that lost iterability.

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/9e103a4298d4dd64. Report an issue: GitHub.

Appendix: source

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

}
// 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) {
  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
}
// CONCATENATED MODULE: ./node_modules/@babel/runtime/helpers/esm/iterableToArray.js
function _iterableToArray(iter) {
  if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter);
}
// CONCATENATED MODULE: ./node_modules/@babel/runtime/helpers/esm/nonIterableSpread.js
function _nonIterableSpread() {
  throw new TypeError("Invalid attempt to spread 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/toConsumableArray.js




function _toConsumableArray(arr) {
  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
}
// EXTERNAL MODULE: external {"commonjs":"sortablejs","commonjs2":"sortablejs","amd":"sortablejs","root":"Sortable"}
var external_commonjs_sortablejs_commonjs2_sortablejs_amd_sortablejs_root_Sortable_ = __webpack_require__("a352");
var external_commonjs_sortablejs_commonjs2_sortablejs_amd_sortablejs_root_Sortable_default = /*#__PURE__*/__webpack_require__.n(external_commonjs_sortablejs_commonjs2_sortablejs_amd_sortablejs_root_Sortable_);

// EXTERNAL MODULE: ./src/util/helper.js
var helper = __webpack_require__("c649");

// CONCATENATED MODULE: ./src/vuedraggable.js

View on GitHub (pinned to 4306c0717f)