Vue mounting error

[dawnho]

• seamapi/react v1.41.0
• Device IDs: 598a5a28-e314-4864-9b5d-3aba353b8587, 86483ac1-ba59-452c-8c0e-60d611928d73

Some components that are displayed correctly on our app fail to be displayed in a modal (In the default slot of a v-dialog https://v2.vuetifyjs.com/en/api/v-dialog/ ) with the following error in console:

https://legacy.reactjs.org/docs/error-decoder.html/?invariant=409

This error appears when the modal is opened.

If I close the modal and re-open it, the component is displayed correctly the second time.

Code:

<v-dialog :value="!!value">
	<seam-device-details
	  :client-session-token="token"
	  :device-id="value"
	/>
<v-dialog>

Workaround

The workaround we found for now is to wrap the seam component in an element conditionally rendered (v-if) on an internal ready variable that is set to true soon after the modal is rendered.

The following code does not work if we remove the delay this.$nextTick and set the this.ready variable immediately.

This is not super clean but it works, so I removed the “Blocking” tag on this issue

  watch: {
    value (val) {
      if (val && !this.ready) this.$nextTick(() => { this.ready = true })
    },
  },

value is the prop set to the deviceId to enable the modal, and set to null to close the modal

https://www.notion.so/f2c3194e9f654046b652a1b833534a8c?v=fd2b298eeb4d42d1b48f6adcbb56b90a&p=e7bb4aa34006499887257d380fd30c3a&pm=s