Nuxt•8mo ago

Cannot use component before initialization - explicit imports with defineComponent SFC pattern

Hello, we are migrating our big Nuxt2 app to Nuxt3. We are migrating from nuxtjs/composition-api, so we are using "defineComponent" pattern. But when I try to load a page with several components, it throws for some components "Cannot use "ComponentName" before initialization" and it points into "Components" part:

import ComponentName from '~/components/myPath/ComponentName.vue'
export default defineComponent({
  components: { ComponentName }, <-- HERE
  props: {...},
  setup: () => {...}
})

import ComponentName from '~/components/myPath/ComponentName.vue'
export default defineComponent({
  components: { ComponentName }, <-- HERE
  props: {...},
  setup: () => {...}
})

But when I remove it from "components" and import statement too, it works like a charm because of autoimports. But... why? Why just some components doing this? Why cannot use explicit imports? Thank you!

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

Cannot use component before initialization - explicit imports with defineComponent SFC pattern