[ADVICE] default as import of defineComponent() has broken typing

[michealroberts]

I just wanted to understand an issue I am seeing, I'm 99% sure it is not Volar throwing any tricks but just wanted to understand the overall reason why a defineComponent is being typed as any.

We have a monorepo setup => whereby the package in question is reliant on vue-demi, the defined component is like:

const Background = defineComponent({
  name: 'Background',
  compatConfig: { MODE: 2 }
  props: {
    ///...all the props
  },
  setup(props: BackgroundProps, { slots }) {
    //...all the setup

    return () => h(
      // ...some rendered element
    )
  },
})

export default Background

This is then exported from the package's entrypoint as:

export { default as Background } from './Background'
// ... other exports here

It's the same if I use the export default directly:

export default defineComponent({ ... })

However, the imported type from a corresponding package seems to be "any":

Does anyone know a trick or something I could do to get this working correctly? 🤔

[so1ve]

Hello @michealroberts, are you using javascript not typescript?

[michealroberts]

@so1ve Hey Ray. TypeScript => the @vue-flow/background package is compiled to js but has the exported types, it's just that they imports are not typed in any way ...

[so1ve]

Ah - I see. This is actually a display issue, if you try access some properties such as Background.xxx it should be typed correctly.

[michealroberts]

@so1ve But on the template, we don't get any type inference from Volar at all. We don't see what props are required or what props are possible ...

[so1ve]

Which version are you using? 1.8.22 or 1.8.23?

[michealroberts]

1.8.22 ...

[michealroberts]

I basically see this:

[so1ve]

Someone told me that 1.8.23 will work, could you please give it a try? Just click install pre-release

[michealroberts]

Hey Ray, damn - still no luck. The repo uses “shamefully-hoist”, and we’re mixing Vue major versions. Could this be the issue?

[so1ve]

Mixing Vue major versions could be the root cause - could you please provide a minimal reproduction to help us investigate? Thanks a lot!

[michealroberts]

@so1ve Sure -> this MR here on this branch should be enough to investigate: bcakmakoglu/vue-flow#1188

Let me know if you need anything else ...

[michealroberts]

Hey @so1ve - apologies for bugging, but I wondered if you managed to look at this?

[so1ve]

Sorry, missed your reply 🥹 I'll check it now

[so1ve]

Everything is working fine on my side 🤔

[michealroberts]

Cool, is that inside the project? Looks to be working well ...

[michealroberts]

@so1ve What is your setup? Volar seems to complain for me regarding @vue/runtime-core:

Vue 2.7 already includes JSX type definitions. You can remove the @vue/runtime-dom dependency from package.json.

[so1ve]

I simply cloned the repository, checkout your PR, and then build the types.

I use Vue Language Tools 1.8.23

[michealroberts]

@so1ve Could you double check this for me, I'm not convinced because the current master branch works but that PR doesn't. I am using Vue Language Tools 1.8.23 pre-release and I have built the types but I am not seeing any type hints at all.