Build errors in unrelated tsx files

[hisuwh]

I'm unable to upgrade from vue-chart-3@0.4.8 to latest v0.5.11 as I am getting build errors in my Vue TSX files that are not using charts:

TS2322: Type '{ src: string; width: string; height: string; border: string; }' is not assignable to type 'ElementAttrs<IframeHTMLAttributes>'.
  Property 'border' does not exist on type 'ElementAttrs<IframeHTMLAttributes>'.
    42 |                                 width="100%"
    43 |                                 height="800px"
  > 44 |                                 border="none"
       |                                 ^^^^^^
    45 |                             >
    46 |                             </iframe>
    47 |                         )}

I notice you have taken a dependency on @vue/runtime-core and @vue/runtime-dom v3.2.20 (https://github.com/victorgarciaesgi/vue-chart-3/blob/main/package.json#L54) - I wonder if this could be a factor?

[victorgarciaesgi]

Hum that's weird. Do you use the JSX shim? I think a will release a version specifically for Vue 3 and another for Vue 2. It becomes too complicated to manage dependencies and types with only vue-demi. I will keep a branch updated for Vue 2

[hisuwh]

I've been going through the versions and it looks like v0.4.10 is when it started breaking. Which looks like when you introduced the dependency on @vue/runtime-core and @vue/runtime-dom: https://github.com/victorgarciaesgi/vue-chart-3/compare/v0.4.8...v0.4.10

I think a will release a version specifically for Vue 3 and another for Vue 2. It becomes too complicated to manage dependencies and types with only vue-demi

Yes I imagine that would be complicated

[maiolica]

I'm having a similar issue, downgrading to v0.4.8 fixes this, thanks @hisuwh for the hint.

[victorgarciaesgi]

Sorry for the lack of updates, I don't have much time recently to work on it. Will keep you updated

[victorgarciaesgi]

@hisuwh @maiolica New version only for Vue 3 is out. With a legacy 2.x for Vue 2! Check out the new docs :)

[victorgarciaesgi]

Tell me if that fixes your problem

[maiolica]

Hi Victor, it seems to be working great, thank you for your work on the docs too!

[hisuwh]

I'm getting a new error now:

 Property 'class' does not exist on type 'Readonly<Partial<{ height: number; width: number; plugins: Plugin<keyof ChartTypeRegistry, AnyObject>[]; chartId: string; cssClasses: string; }> & Omit<...>>'.
    25 |         return (
    26 |             <Doughnut
  > 27 |                 class="position-relative h-100"
       |                 ^^^^^
    28 |                 chartData={chartData}
    29 |                 options={chartOptions}
    30 |             />

[victorgarciaesgi]

@hisuwh Volar is returning this error? I'll check if htmlAttrs is declared

[victorgarciaesgi]

Oh it's on tsx render function sorry

[victorgarciaesgi]

Hmm no error on my side

[victorgarciaesgi]

Oh ok it's the build step that fails. Weird

[hisuwh]

What if you assign the props explicitly rather than spread?

[hisuwh]

I get the error on build and in Vs code

[victorgarciaesgi]

I know where it comes from. I use the type ExtractPropTypes and it's not made for tsx. I will fix it tonight

[victorgarciaesgi]

@hisuwh Should be fixed on 3.0.1

[hisuwh]

3.0.1? I'm using Vue 2. Is that right?

[victorgarciaesgi]

Oh shit I though you were on Vue 3 aha

[hisuwh]

My bad tbf - I never specified

[victorgarciaesgi]

@hisuwh Try 2.0.2 it should work now

[hisuwh]

Mmm same problem.

[hiro05097952]

I'm having a similar error in Vue3 version it's worked on 0.4.8

ERROR in src/views/transaction-management/withdraw-review/index.vue:382:19
TS2339: Property '$t' does not exist on type 'ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>>'.
    380 |       const fileName = `${dayjs(param[`${conditions.dateType}_at_before`]).format(
    381 |         'YYYYMMDD'
  > 382 |       )}-${proxy?.$t('menu.withdraw_review')}.csv`
        |                   ^^
    383 |       downloadFile('/manage/report/withdraw/', fileName, param)
    384 |     }
    385 |

[victorgarciaesgi]

@hisuwh sorry i don't have much time lately i will look into it

[victorgarciaesgi]

I'm having a similar error in Vue3 version

it's worked on 0.4.8

ERROR in src/views/transaction-management/withdraw-review/index.vue:382:19

TS2339: Property '$t' does not exist on type 'ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>>'.

    380 |       const fileName = `${dayjs(param[`${conditions.dateType}_at_before`]).format(

    381 |         'YYYYMMDD'

  > 382 |       )}-${proxy?.$t('menu.withdraw_review')}.csv`

        |                   ^^

    383 |       downloadFile('/manage/report/withdraw/', fileName, param)

    384 |     }

    385 |

This error is not related to vue-chart-3

[victorgarciaesgi]

@hisuwh Still have the problem?

[hisuwh]

@victorgarciaesgi upgraded to 2.0.3 and yes it seems I still have the same problem:

[hisuwh]

@victorgarciaesgi any more guidance on this?

[victorgarciaesgi]

I will look at it. It's really strange because the error only shows in the cli on the on the IDE

[victorgarciaesgi]

Must be incompatibility issues between Vue 2 proxy and tsx. I it suits you, I can make additional exports like DoughtChartJsx with type any so that the cli don't scream at you. But you will loose auto-completion

[hisuwh]

@victorgarciaesgi this might help - at least I can update for new features?