0

I have a component proxy which renders components using vue.js build in dynamic component. The instanceName is the component to render. The data is the relevant data for the component to render.

<template>
  <component v-if="getInstanceName" :is="getInstanceName" :data="data" />
</template>

<script>
import WidgetTypes from './WidgetTypes'
import { hydrateWhenVisible } from 'vue-lazy-hydration'

const components = Object.keys(WidgetTypes.types).reduce(
  (components, typeKey) => {
    const type = WidgetTypes.types[typeKey]
    components[type] = hydrateWhenVisible(
      () =>
        import(
          /* webpackChunkName: "[request]" */
          /* webpackMode: "lazy" */
          `./dynamic/${type}/${type}.vue`
        ),
      { observerOptions: { rootMargin: '100px' } }
    )
    return components
  },
  {}
)

export default {
  name: 'WidgetComponentProxy',
  components: components,
  props: {
    data: {
      type: Object,
      required: true,
      default: null
    }
  },
  computed: {
    getInstanceName() {
      return WidgetTypes.getInstanceName(this.data.instance_type)
    }
  }
}
</script>

All this works like a charm.. except ;-)

When inspecting in vue.js devtools I see my component twice. The component is somehow child to itself. I sometimes get errors trying to render components using this proxy. enter image description here

Any help appreciated thanks

kissu
  • 40,416
  • 14
  • 65
  • 133
Lervad
  • 106
  • 6
  • You don't have any kind of hydration issues in the console? Maybe the lazy hydration is tricking the devtools? Try to toggle them on and off. I suppose your component doesn't have any kind of recursive logic. – kissu Sep 23 '22 at 09:12
  • Recursion is sometimes implicit - if you import a child component under the same name as the current component. – IVO GELOV Sep 23 '22 at 10:02

0 Answers0