TS2769 error caused when importing lang="js" component with raw default export on Vue < 2.7

[yckimura]

I found TS2769 error caused when importing lang="js" component with raw default export (export default {}) on Vue < 2.7 (still used in Nuxt apps).

src/App.vue:

<template>
  <div id="app">
    <HelloWorld msg="hello"/>
  </div>
</template>

<script lang="ts">
import {defineComponent} from '@vue/composition-api';
import HelloWorld from './components/HelloWorld.vue';

export default defineComponent({
  name: 'App',
  components: {
    HelloWorld
  }
});
</script>

src/components/HelloWorld.vue:

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String,
  },
};
</script>

Error:

src/App.vue:14:5 - error TS2769: No overload matches this call.
  Overload 1 of 3, '(options: ComponentOptionsWithoutProps<{}, unknown, Data, {}, {}, {}, {}, {}>): VueProxy<{}, unknown, Data, {}, {}, {}, {}, {}>', gave the following error.
    Type 'DefineComponent<{ msg: StringConstructor; }, any, any, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, Record<string, any>, string, PublicProps, Readonly<...>, {}>' is not assignable to type 'Component<any, any, any, any> | AsyncComponent<any, any, any, any>'.
      Type 'ComponentPublicInstanceConstructor<any, any, any, any, ComputedOptions, MethodOptions> & ComponentOptionsBase<Readonly<ExtractPropTypes<...>>, ... 8 more ..., {}> & VNodeProps & AllowedComponentProps & ComponentCustomProps' is missing the following properties from type 'VueConstructor<Vue>': extend, nextTick, set, delete, and 10 more.
  Overload 2 of 3, '(options: ComponentOptionsWithArrayProps<string, Data, Data, {}, {}, {}, {}, {}, Readonly<{ [x: string]: any; }>>): VueProxy<...>', gave the following error.
    Type 'DefineComponent<{ msg: StringConstructor; }, any, any, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, Record<string, any>, string, PublicProps, Readonly<...>, {}>' is not assignable to type 'Component<any, any, any, any> | AsyncComponent<any, any, any, any>'.
  Overload 3 of 3, '(options: ComponentOptionsWithProps<ComponentPropsOptions<Data>, Data, Data, {}, {}, {}, {}, {}, ExtractPropTypes<ComponentPropsOptions<Data>>>): VueProxy<...>', gave the following error.
    Type 'DefineComponent<{ msg: StringConstructor; }, any, any, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, Record<string, any>, string, PublicProps, Readonly<...>, {}>' is not assignable to type 'Component<any, any, any, any> | AsyncComponent<any, any, any, any>'.

This error is caused by type incompatibility between property type of ComponentOptions<V>['components'] from vue@2.6.14 and return value of defineComponent from @vue/runtime-dom@3.2.37.

There is a dirty fix that can avoid the error by directly rewriting the code generator in the extension from @vue/runtime-dom to @vue/composition-api as follows (but it doesn't support if @vue/composition-api is not installed):

Before:

https://github.com/johnsoncodehk/volar/blob/b1896bbd0cb23ea35b73ad2c232b0a6832f70939/packages/vue-code-gen/src/generators/script.ts#L211

After:

 codeGen.addText(`(await import('@vue/composition-api')).defineComponent(`); 

[countMort]

I'm facing the same issue with a build package with vue-cli build.

[johnsoncodehk]

You can use vueCompilerOptions.experimentalComponentOptionsWrapper in v0.40.7.

• tsconfig.json:

{
  "vueCompilerOptions": {
    "target": ...,
    "experimentalComponentOptionsWrapper": [
      "(await import('@vue/composition-api')).defineComponent(",
      ")"
    ]
  }
}