Cannot import properly in a vite environment

[jrochkind]

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]

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]

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]

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

[tkirda]

The project just shipped v2.0 — a ground-up TypeScript rewrite. Items previously reported in this area are no longer reproducible against current master:

• jQuery deprecation warnings ($.trim, $.isFunction, etc.) — source no longer uses any of them; only native equivalents.
• Bundler / ESM imports — 2.0 ships a proper ESM bundle (dist/jquery.autocomplete.esm.js) with correct package.json exports.
• TypeScript typings — 2.0 emits bundled .d.ts files from source.
• Paste / programmatic value changes — the plugin listens for the input event, which fires on paste in modern browsers.
• CI tooling — now handled by GitHub Actions.

Closing as resolved by 2.0. If you can still reproduce against current master, please open a fresh issue with a minimal repro. Thanks for the original report.