Showing NcModal dialog throws TypeError: trapStack.indexOf is not a function

[calvinrw]

Expected behavior

Barring any user programming errors, a component using NcModal in a similar manner to that shown in the Nextcloud Vue style guide will not cause any unhandled framework errors to be thrown when the modal dialog is shown.

Actual behavior

When the minimum reproducible example that follows is compiled and rendered, the dialog is shown when the 'Show Modal' button is clicked, as expected, but a runtime error is logged in the browser:

[Vue warn]: Error in nextTick: "TypeError: trapStack.indexOf is not a function"

found in

---> <NcModal>
       <TestComponent> at src/components/test/TestComponent.vue
         <TestView> at src/views/TestView.vue
           <TestApp> at src/views/TestApp.vue
             <NcAppContent>
               <NcContent>
                 <Root> [vue.runtime.esm.js:4605](webpack:///inventory/node_modules/vue/dist/vue.runtime.esm.js)
    VueJS 9
    useFocusTrap NcModal.js:2
    mounted NcModal.js:2
    VueJS 19
    doShowModal TestComponent.vue:10
    VueJS 33

TypeError: trapStack.indexOf is not a function
    activateTrap focus-trap.esm.js:65
    addListeners focus-trap.esm.js:578
    finishActivation focus-trap.esm.js:647
    activate focus-trap.esm.js:656
    node_modules NextJS
    VueJS 5
    useFocusTrap NcModal.js:2
    mounted NcModal.js:2
    VueJS 19
    doShowModal TestComponent.vue:10
    VueJS 33

The same error is also thrown when the dialog's close button is clicked, however the close button / doCancel method works as expected and causes the modal to be closed. In my use case, these errors do not appear to impact the behavior of the component / app.

Minimum example to reproduce

<template>
<div class="test-view">

    <NcButton @click="doShowModal">Show Modal</NcButton>

    <NcModal v-if="showModal"
             @close="doCancel">
        <div class="modal__content">
            <h2>Hello, world</h2>
        </div>
    </NcModal>

</div>
</template>

<script>
import NcButton from "@nextcloud/vue/dist/Components/NcButton"
import NcModal from "@nextcloud/vue/dist/Components/NcModal"

export default {
  components: {
    NcButton,
    NcModal,
  },

  methods: {
    doShowModal() {
      this.showModal = true;
    },

    doCancel() {
      this.showModal = false;
    },
  },

  data() {
    return {
      showModal: false,
    }
  },

}
</script>

<style>
.test-view {
    padding: 50px;
}
.modal__content {
    margin: 50px;
    text-align: center;
}
</style>

Potentially relevant bits from package.json for my project:

  "dependencies": {
    "@nextcloud/axios": "^2.3.0",
    "@nextcloud/dialogs": "^3.2.0",
    "@nextcloud/router": "^2.0.0",
    "@nextcloud/vue": "^7.3.0",
    "vue": "^2.7.14",
    "vue-good-table": "^2.21.11",
    "vue-material-design-icons": "^5.1.2",
    "vue-router": "^3.6.5",
    "vuex": "^3.6.2",
    "vuex-router-sync": "^5.0.0"
  },
  "browserslist": [
    "extends @nextcloud/browserslist-config"
  ],
  "engines": {
    "node": "^16.0.0",
    "npm": "^7.0.0 || ^8.0.0"
  },
  "devDependencies": {
    "@nextcloud/babel-config": "^1.0.0",
    "@nextcloud/browserslist-config": "^2.3.0",
    "@nextcloud/eslint-config": "^8.1.4",
    "@nextcloud/stylelint-config": "^2.3.0",
    "@nextcloud/webpack-vue-config": "^5.4.0",
    "webpack-cli": "^4.10.0"
  }

[raimund-schluessler]

@calvinrw Could you please check whether this error still occurs with @nextcloud/vue 7.7.1?

[calvinrw]

This error no longer occurs in 7.7.1. Thanks!