search

devbridge / jQuery-Autocomplete

Ajax Autocomplete for jQuery allows you to easily create autocomplete/autosuggest boxes for text input fields
https://www.devbridge.com/sourcery/components/jquery-autocomplete/
Other
3.57k stars 1.67k forks source link

Cannot import properly in a vite environment #843

Open jrochkind opened 1 year ago

jrochkind commented 1 year ago

I am in the process of trying to switch from webpack to vite. I am far from an expert in any of this js build tooling stuff, just trying to muddle through, apologies if I'm saying weird things.

Once I switched to vite, import 'devbridge-autocomplete'; no longer is succesfully installing the Autocomplete plugin into JQuery -- the plugin is not actually available.

Trying to debug, it looks like the browserify branch of the load code is being triggered:

https://github.com/devbridge/jQuery-Autocomplete/blob/8138252b4c6fa994a0d438630ea375308e7f3b11/dist/jquery.autocomplete.js#L18-L20

But doesn't actually work for some reason. Although no error appears in console. I am actually not sure why that branch is being triggered, to me it seems typeof require if undefined. But a debugger says somehow that condition is triggered, and does not work.

If the last else branch for "browser globals" is used, then everything works fine for me (because I have specifically set window.$ and window.jQuery for legacy code, I guess).

https://github.com/devbridge/jQuery-Autocomplete/blob/8138252b4c6fa994a0d438630ea375308e7f3b11/dist/jquery.autocomplete.js#L21-L23

Trying to debug further... I think the built-in initialize code is somehow loading a second copy of jQuery and installing the plugin in that, instead of in my window.jQuery where I want it. But I could be misunderstanding what's going on. And there doesn't seem to be any way to exersize any control over this anyway.

I'm not quite sure what to do to get the plugin to install in this environment. Any ideas welcome.

tkirda commented 1 year ago

I think you are right regarding: loading a second copy of jQuery and installing the plugin in that .

If this is bundling in the server side, then it will load jquery via require('jquery') and will use that instance.

jrochkind commented 1 year ago

Thanks @tkirda -- it's hard to figure out how to avoid that, since in a vite environment require isn't even available in my actual local JS code... it's confusingly somehow available via the build process only in dependencies I guess(?), where the build translates from commonJS require to ES6 import... but in a way that (apparently) results in a different copy of JQuery referred to in the autocomplete require than in my own code when I do an import.

Basically the autocomplete code trying to auto-detect what kind of a build environemnt it's in and where to find the jQuery to add the plugin to -- is failing in a modern environment.

I think the only reasonable fix would be providing some way for the consumer to manually specify the jQuery it wants autocomplete plugin added to, when loading jquery-autocomplete. Right now there is no way to do that, there is just a single JS file which insists on auto-detecting. I'm not myself sure how that could be added in a simple non-disruptive backwards-compat way though without making any significant code changes nobody has appetite for here.

tkirda commented 1 year ago

I'm open for suggestions or PR on how this could be improved. This project is not actively maintained.