wonderful-panda / vue-tsx-support

TSX (JSX for TypeScript) support library for Vue
MIT License
578 stars 40 forks source link

Jest and TSX are not working #78

Closed Maxim-Mazurok closed 3 years ago

Maxim-Mazurok commented 3 years ago

Please, see https://github.com/vuejs/vue-cli/issues/6389 for details. Related to #77 and https://github.com/wonderful-panda/vue-tsx-support/commit/175cdf9a8a26e4369e874472a45eb7f5524ade00

In summary, we need CommonJS version. Workaround: add transformIgnorePatterns: [] to babel config

A proper fix is to change the vue-tsx-support package to provide both CommonJS and ES module entries, following the guide from the Node.js documentation: https://nodejs.org/api/packages.html#packages_conditional_exports

(c) @sodatea

Maxim-Mazurok commented 3 years ago

@wonderful-panda any update on this one, please?

wonderful-panda commented 3 years ago

Sorry for the late response.

vue-tsx-support can't provide multiple modules for now, because this exposes not only "vue-tsx-support" but also "vue-tsx-support/lib/{vca, modifiers}".

I'm planning to separate them into other packages, maybe within a month.

toomuchdesign commented 3 years ago

Hey @wonderful-panda, I've just come this library and it feels like a wave of fresh air in the so self-constraint world of Vue.js. 🙌

I'm sure I'm missing context here, wouldn't be enough exposing both a lib and a es folder containing respectively the CommonJS and ES module build of this library?

Happy to support if it made any sense. Cheers!

wonderful-panda commented 3 years ago

I just didn't know multiple entry points can be exposed with both esmodule and commonjs.

Please confirm 3.2.0-beta.1 solves problem.

Maxim-Mazurok commented 3 years ago

I think that it's fixed now. With 3.1.0 and transformIgnorePatterns: ["vue-tsx-support/*"] it fails:

SyntaxError: Unexpected token 'export'

    > 1 | import * as tsx from "vue-tsx-support";
        | ^
      2 | import { VNode } from "vue";
      3 | import {
      4 |   VBtn,

With 3.2.0-beta.1 and transformIgnorePatterns: ["vue-tsx-support/*"] it works as expected.

I still can't remove transformIgnorePatterns completely, because if I remove it, it fails for vuetify now:

SyntaxError: Unexpected token 'export'

      1 | import * as tsx from "vue-tsx-support";
      2 | import { VNode } from "vue";
    > 3 | import { VTabs, VTabsItems } from "vuetify/lib";
        | ^

So I'll raise this issue for vuetify repo. Thank you!

It also works now when I use this pattern: transformIgnorePatterns: ["node_modules/(?!(vuetify)/)"], (inspired by)