Does Vue 3.4.x hijack the global $ from JQuery?

[stoem]

Hi all, we are running an old legacy Rails app which contains JQuery and Vue code.

Somewhere between Vue 3.2.37 and Vue 3.4.x, a change seems to have been introduced that made Vue hijack the global JQuery $ (dollar sign) variable. In other words, our JS code breaks under Vue 3.4.x but runs fine under Vue 3.2.37 (and possibly some later versions too).

Does anyone have any information on that? I cannot find anything in the release notes.
I'd be happy to dig a bit deeper and maybe set up a reproducible example if required. That said, maybe someone can clear this up for us. It was a tricky one to debug.

[LinusBorg]

We did not do anything like that, at least not intentional. And if it were a bug in Vue that affected jquery in such a general way, you would also likely see a lot of issues in our tracker about that if that were the case, but there are none.

So it's very likely that this is something specific to your project setup and I would need to understand how this problem manifests in your project exactly.

[stoem]

Thanks, I agree that this issue isn't wide spread. However the issue appeared after a recent Vue upgrade to the latest version and was fixed by a minor version downgrade of Vue.

I'll see if I can isolate it further.

[LinusBorg]

Yeah, it's of course possible we have some edge case bug leading to this. We would need your help reproducing it, then we can open an issue and fix it.

[stoem]

Digging deeper, I found the following method declared using a dollar sign. I think it is Vue code but the issue may be with vite-build and minification output. I'm not sure how to configure it to stop it from doing this. I'll ask on vite's repo.

function $(e, t=null, n=null, l=0, o=null, r=e === We ? 0 : 1, i=!1, s=!1) { const a = { ... };

[stoem]

Earlier Vue versions such as Vue 3.2.37 give this output instead

function P(e, t=null, n=null, l=0, o=null, r=e === Ne ? 0 : 1, i=!1, a=!1) {...

[stoem]

We've swapped the minifier to Terser and used this config to work around the issue which seems to be with Vite and the latest version of Vue.

minify: 'terser', terserOptions: { mangle: { reserved: ['$', '_'] } }