Build error when using vue-tsx-support/lib/vca

[Spaubleit]

Hi. I try to use this library with nuxtjs. But I get error when I try example:

import { computed, defineComponent } from "@vue/composition-api";
import * as vca from "vue-tsx-support/lib/vca"

const MyComponent = vca.component({
  name: "MyComponent",
  props: {
    text: { type: String, required: true },
    important: Boolean,
  },
  setup(p) {
    const className = computed(() => p.important ? "label-important" : "label-normal");
    return () => (
      <span class={className.value}>{p.text}</span>;
  );
  }
});

export default MyComponent;

I get build error like this:

Module not found: Error: Can't resolve 'vue-tsx-support/lib/vca' in ... What I do wrong? I installed the library, changed package.json and .babelrc. I'd happy provide additional information if needed.

[TheoBP]

I have the same issue, it only happens with 3.2.0.

[medairbit]

Here's a workaround for nuxt projects:

• Add a custom alias in your nuxt.config.js file pointing to the dist version of vca:

  // nuxt.config.js
  build: {
  extend (config, { isServer }) {
  config.resolve.alias['@my-custom-alias'] = `vue-tsx-support/dist/${isServer ? 'cjs' : 'esm'}/vca`
  }
  }

• Create a declaration file tsx.d.ts in your project and use the same custom alias for the module name:

  // tsx.d.ts
  declare module '@my-custom-alias' {
  export * from 'vue-tsx-support/lib/vca'
  }

• Replace vue-tsx-support/lib/vca imports with your custom alias @my-custom-alias

  // import * as vca from "vue-tsx-support/lib/vca"
  import * as vca from "@my-custom-alias"

Note: We could have added vue-tsx-support/lib/vca as the alias target directly but it won't work in the ssr mode. (https://github.com/nuxt/nuxt.js/issues/3439)

[Spaubleit]

Thank you! It works with with this changes. Sorry for long response. I was away from that project.