[BUG] Autocomplete fields are not loading in production environment when looking at a hosting provider page

[mrchrisadams]

Right now, our staff label autocomplete widgets load in development, but not in production. this makes it hard to tag providers for following up with later.

Describe the bug

When you visit a hosting provider page, in development you see nice autocomplete widget from Django Autocomplete Light:

However, loading the same page with production mode on shows this unsightly select widget thing:

To Reproduce

Steps to reproduce the behavior:

1. make sure you're using the appropriate environment (dev vs prod)
2. Go to a hosting provider page, i.e. admin/accounts/hostingprovider/754/change/
3. See error something like the screenshot above

Expected behavior

Both environments should be showing the autocomplete.

Actual behavior

Only development shows the widget. Production throws cryptic error, and we get the ugly, unusable widget.

Additional context

There is this message in the browser console when loading in production:

Uncaught TypeError: Cannot read properties of undefined (reading 'define')
    at dalLoadLanguage (en.0cbbd8d2522c.js:2:103)
    at autocomplete_light.min.8172b0a59e37.js:1:1007
    at autocomplete_light.min.8172b0a59e37.js:1:2942

This makes me think that the widget is loading before jquery is available, or something similar.

I'm not sure why this would work in development but not production.

[mrchrisadams]

I think this is the thing we'd need to change - so we delay the calling of the autocomplete initialisation script until after we are sure jquery and the rest are loaded.

https://django-autocomplete-light.readthedocs.io/en/master/tutorial.html#overriding-javascript-code

I still don't know why it works in dev and not production, but hopefully when someone comes back to this, having this link will help.