{"record":{"id":"fca9b198999342db","repo":"OrchardCMS/OrchardCore","slug":"transition-group-inside-component-is-not-supported-please","errorCode":null,"errorMessage":"Transition-group inside component is not supported. Please alter tag value or remove transition-group. Current tag value: ","messagePattern":"Transition-group inside component is not supported\\. Please alter tag value or remove transition-group\\. Current tag value: ","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"src/OrchardCore.Modules/OrchardCore.Resources/wwwroot/Vendor/vue-draggable-2.24.3/vuedraggable.common.js","lineNumber":2146,"sourceCode":"    if (this.list !== null && this.value !== null) {\n      helper[\"b\" /* console */].error(\"Value and list props are mutually exclusive! Please set one or another.\");\n    }\n\n    if (this.element !== \"div\") {\n      helper[\"b\" /* console */].warn(\"Element props is deprecated please use tag props instead. See https://github.com/SortableJS/Vue.Draggable/blob/master/documentation/migrate.md#element-props\");\n    }\n\n    if (this.options !== undefined) {\n      helper[\"b\" /* console */].warn(\"Options props is deprecated, add sortable options directly as vue.draggable item, or use v-bind. See https://github.com/SortableJS/Vue.Draggable/blob/master/documentation/migrate.md#options-props\");\n    }\n  },\n  mounted: function mounted() {\n    var _this3 = this;\n\n    this.noneFunctionalComponentMode = this.getTag().toLowerCase() !== this.$el.nodeName.toLowerCase() && !this.getIsFunctional();\n\n    if (this.noneFunctionalComponentMode && this.transitionMode) {\n      throw new Error(\"Transition-group inside component is not supported. Please alter tag value or remove transition-group. Current tag value: \".concat(this.getTag()));\n    }\n\n    var optionsAdded = {};\n    eventsListened.forEach(function (elt) {\n      optionsAdded[\"on\" + elt] = delegateAndEmit.call(_this3, elt);\n    });\n    eventsToEmit.forEach(function (elt) {\n      optionsAdded[\"on\" + elt] = emit.bind(_this3, elt);\n    });\n    var attributes = Object.keys(this.$attrs).reduce(function (res, key) {\n      res[Object(helper[\"a\" /* camelize */])(key)] = _this3.$attrs[key];\n      return res;\n    }, {});\n    var options = Object.assign({}, this.options, attributes, optionsAdded, {\n      onMove: function onMove(evt, originalEvent) {\n        return _this3.onDragMove(evt, originalEvent);\n      }\n    });","sourceCodeStart":2128,"sourceCodeEnd":2164,"githubUrl":"https://github.com/OrchardCMS/OrchardCore/blob/4306c0717fe573f6fca1b4955909ddab6a192807/src/OrchardCore.Modules/OrchardCore.Resources/wwwroot/Vendor/vue-draggable-2.24.3/vuedraggable.common.js#L2128-L2164","documentation":"vuedraggable's mounted() checks whether the rendered root element tag matches the configured tag. When they differ (a 'non-functional component mode') AND a transition-group transition mode is active, the drag/transition integration cannot work, so it throws this Error. It protects users from a silently non-functional animated drag list.","triggerScenarios":"Using <draggable tag=\"div\"> (or default tag) whose rendered root doesn't match getTag() while passing transition-mode/transition-group props, e.g. setting the transition props but rendering the component as a functional/component wrapper, or customizing tag so the root node name differs (e.g. tag='transition-group' style misconfig).","commonSituations":"Copy-pasting Vue 2 transition-group examples into wrappers that change the root tag; using <draggable :component-data> with mismatched tag and is='transition-group'; upgrading Vue where root node normalization changed.","solutions":["Set tag explicitly to the element that will actually render, e.g. tag=\"tbody\" for table rows or tag=\"div\"","If you don't need animations, remove the transition-group/component-data/transition-mode configuration","Wrap animation differently: put transition-group outside and use draggable without transition-mode","Pin vuedraggable 2.24.x usage patterns per docs when combining tag + transition"],"exampleFix":"// before\n<draggable :list=\"items\" tag=\"section\" :component-data=\"{ is: 'transition-group' }\">\n\n// after\n<draggable :list=\"items\" tag=\"ul\" :component-data=\"{ tag: 'ul', name: 'flip-list', type: 'transition' }\">\n<!-- rendered root tag must equal configured tag -->","handlingStrategy":"validation","validationCode":"const rootTag = component.$el?.nodeName?.toLowerCase(); const configured = getTag().toLowerCase(); if (rootTag !== configured && usesTransitionMode) { console.warn('tag mismatch with transition-group; fix tag prop'); }","typeGuard":"null","tryCatchPattern":"try { mountDraggable(); } catch (e) { if (e.message.startsWith('Transition-group inside component')) { console.error('Fix the tag prop or remove transition-mode', e); } else { throw e; } }","preventionTips":["Set tag to exactly the element that renders","Keep tag and component-data tag consistent","Remove transition-mode when not animating","Follow vuedraggable docs for transition-group examples"],"tags":["vue","vuedraggable","transition-group","configuration"],"backgroundTag":"invalid-config-value","analyzedSha":"4306c0717fe573f6fca1b4955909ddab6a192807","analyzedAt":"2026-09-13T17:41:05.024Z","contentChangedAt":"2026-09-13T17:41:05.024Z","schemaVersion":2},"datasetVersion":"2026-09-23T08:17:48.524Z"}