Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[vue3.x] Global types break volar and vue-tsc

See original GitHub issue

Describe the bug

global.d.ts code breaks volar and vue-tsc

Additional context

This codeblocks breaks volar and vue-tsc.

declare global {
  namespace JSX {
    // tslint:disable no-empty-interface
    interface Element extends VNode {}
    // tslint:disable no-empty-interface
    interface ElementClass extends Vue {}
    interface IntrinsicElements {
      'vue-slider-dot': any
      'vue-slider-mark': any
      div: any
      span: any
      input: any
      template: any
    }
  }
}

Bildschirmfoto 2022-07-22 um 17 03 46

Every component is any when the global JSX namespace is overridden. If I remove this codeblock volar and vue-tsc will work again. If its for dev purposes only maybe you could just remove it from the npm bundle?

A workaround for now is the following

"postinstall": "rimraf node_modules/vue-slider-component/lib/typings/global.d.ts"

Environment (If you feel unrelated, please delete the block)

OS & Version: macOS
Vue version: 3.2.37
Component Version: 4.1.0-beta.1
vue-tsc: 0.38.8

Issue Analytics

State:
Created a year ago
Comments:5 (5 by maintainers)

Top GitHub Comments

1reaction

Blackfadedcommented, Jul 27, 2022

Yes, this works! Thank you very much!

0reactions

NightCatSamacommented, Jul 27, 2022

I have modified the type file, you can try installing the latest version 4.1.0-beta.2.

Top Results From Across the Web

Latest vue-tsc release breaks templates that use global ...

I have the same problem on v0.38.2 trying to use Volar on a Nuxt 2 project. <template> <button class=" ...

How can I make Volar aware of globally available components ...

So I'm working on a brand new project with Vue 3 and Volar as the extension in VSCode. And ...

Using Vue with TypeScript - Vue.js

Volar is the official VSCode extension that provides TypeScript support inside Vue SFCs, along with many other great features. Volar replaces Vetur, our ......

'defineComponent' in Vue 3 Is Pure Magic! - Telerik

Once you set it up, you will be able to use all kind of autocompletions of modules, global components configurations and quick type...

Generically Typed Vue Components with Composition API

What we want here, is volar to be able to deduce the props/slots/emit generic types for these components and allow for type-checking and ......