jQuery type conflict

[matthew-dean]

Describe the bug

Not sure why this is only turning up now (maybe a package update?), but Vue Macros' type definition is over-writing jQuery type definitions.

Specifically, I'm now seeing TypeScript errors for lines like $.getJSON. When I click on the $, whereas I used to get JQueryStatic, now it links to:

declare const $: typeof import('./macros').$

Note: this happens even though I'm explicitly importing $ from 'jquery'. Is there a way to remove the global $ from vue-macros?

Reproduction

N/A -- isn't a runtime issue

System Info

System:
    OS: macOS 14.3.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 44.66 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.13.0 - ~/Library/Caches/fnm_multishells/69986_1710208129613/bin/node
    Yarn: 1.22.19 - ~/Library/Caches/fnm_multishells/69986_1710208129613/bin/yarn
    npm: 8.19.3 - ~/Library/Caches/fnm_multishells/69986_1710208129613/bin/npm
    pnpm: 8.10.2 - /opt/homebrew/bin/pnpm
  Browsers:
    Chrome: 122.0.6261.128
    Safari: 17.3.1

Used Package Manager

npm

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• The provided reproduction is a minimal reproducible of the bug.

[matthew-dean]

@dosu-bot

As for your question about specific macros in the vue-macros library that could potentially conflict with jQuery's $, none of the macros included in the vue-macros library, as listed in the provided context, specifically mention or suggest the use of the $ symbol that could potentially conflict with jQuery's $. The macros are focused on Vue-specific functionalities such as defining emits, models, props, slots, and setup components, among others, without any direct reference to the $ symbol.

This is false. There's a "destructuring" macro, documented here. I'm not sure why they went with $ when it conflicts with not just a major library that uses this symbol in the global namespace, but also $() and $$() are globals in Chrome devtools.

What's also interesting is this TypeScript error is occuring in a .ts file, not a .vue file, where the macro technically would never apply. Nor do I understand why I'm seeing this TypeScript error when I wasn't before. 🤷‍♂️

[matthew-dean]

@dosubot I'm not able to do the suggested code changes because I'm using Nuxt, where you can't change the include key in tsconfig.json

[matthew-dean]

@dosubot Nope, that 100% does not work.

It seems the only thing that works is pnpm patch @vue-macros/reactivity-transform and commenting out declare const $: typeof import('./macros').$ 🤷‍♂️

[sxzz]

Could you please provide a reproduction?