Vue-js-modal: MutationObserver warnings

[josephzidell]

Problem:

Mocha is reporting warnings when running tests
...

Example & screenshots:

 MOCHA  Testing...
  Home.vue
(node:234) UnhandledPromiseRejectionWarning: Error: connect ECONNREFUSED 127.0.0.1:80
    at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1106:14)
(node:234) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 2)
(node:234) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
    ✓ shows a modal when user clicks “Create New Record” button
[Vue warn]: Error in nextTick: “TypeError: Failed to execute ‘observe’ on ‘MutationObserver’: parameter 1 is not of type ‘Node’.”
found in
---> <VueJsModal> at src/Modal.vue
       <Home> at src/views/Home.vue
         <Root>
TypeError: Failed to execute ‘observe’ on ‘MutationObserver’: parameter 1 is not of type ‘Node’.
    at convert (/usr/src/app/node_modules/jsdom/lib/jsdom/living/generated/Node.js:573:11)
    at MutationObserver.observe (/usr/src/app/node_modules/jsdom/lib/jsdom/living/generated/MutationObserver.js:41:16)
    at VueComponent.connectObserver (/usr/src/app/dist/webpack:/node_modules/vue-js-modal/dist/index.js:1:1)
    at VueComponent.callAfterEvent (/usr/src/app/dist/webpack:/node_modules/vue-js-modal/dist/index.js:1:1)
    at VueComponent.<anonymous> (/usr/src/app/dist/webpack:/node_modules/vue-js-modal/dist/index.js:1:1)
    at Array.<anonymous> (/usr/src/app/dist/webpack:/node_modules/vue/dist/vue.runtime.esm.js:1980:1)
    at flushCallbacks (/usr/src/app/dist/webpack:/node_modules/vue/dist/vue.runtime.esm.js:1906:1)
    ✓ [skipped more tests for brevity]
  5 passing (960ms)
 MOCHA  Tests completed successfully

...

I have checked stackoverflow for solutions and 100% sure that issue not in my code.
Yes

[hybridwebdev]

Posting your code would help. Please post a fiddle or codepen.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale[bot]]

This issue has been automatically closed.

[phh]

Not to reopen this issue, but found this issue when I was searching for this error.

I've got this error when my <vue-modal> was inside the element I was using to show it:

<div class="image-dropzone" @click="showModal">
<vue-modal></vue-modal>

Moving it outside fixes this error for me:

<vue-modal></vue-modal>
<div class="image-dropzone" @click="showModal">

[dsktschy]

@euvl
This issue must not be closed.

When setting height="auto" and coming from another route with Nuxt(vue-router), the error occured.
When setting number to height or this page is the first route, the error doesn't occur.

<template>
  <vue-modal
    name="test"
    height="auto"
  >
    test
  </vue-modal>
</template>

<script>
export default {
  mounted() {
    // Error
    this.$modal.show('test')
  }
}
</script>

The error is:

TypeError: Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'.
    at VueComponent.connectObserver (index.js?1881:1)
    at VueComponent.callAfterEvent (index.js?1881:1)
    at VueComponent.eval (index.js?1881:1)
    at Array.eval (vue.runtime.esm.js?2b0e:1980)
    at flushCallbacks (vue.runtime.esm.js?2b0e:1906)

Maybe the cause is that there is the case that this.$refs.overlay is undefined in this line.
https://github.com/euvl/vue-js-modal/blob/4abdf23154045ca0d65da086f4f64dbeaba6f3b1/src/Modal.vue#L633

I temporarily avoided the error in this way.

<script>
export default {
  mounted() {
    this.$nextTick(() => {
      this.$modal.show('test')
    })
  }
}
</script>

[Amersfoj]

I had the same error and was unable to identify the problem. Updating from 1.3.31 to 2.0.0 fixed the problem for me.

[ShunichiTanaka]

I had the same error below. And updating from 1.3.31 to 2.0.0 , fixed it.

[Vue warn]: Error in nextTick: “TypeError: Failed to execute ‘observe’ on ‘MutationObserver’: parameter 1 is not of type ‘Node’.”
found in
---> <VueJsModal> at src/Modal.vue
       <Home> at src/views/Home.vue
         <Root>
TypeError: Failed to execute ‘observe’ on ‘MutationObserver’: parameter 1 is not of type ‘Node’.