Cannot read property 'define' of undefined at dalLoadLanguage

quinceleaf commented 3 years ago

Trying to use DAL for formsets in Django 3.1.2.

Problem described occurs in 3.8.1, 3.8.0, 3.7.0dev0 installed via pip. Does not occur in 3.6.0dev1 and earlier (tried through 3.5.1) Does not occur in the sample project (which installs via git)

Set up autocomplete views and form widgets per documentation tutorial. Included {{form.media}} on page as instructed. Upon page load, select widgets are not populated (just single -----------).

Cannot diagnose further as error is thrown in console:

en.js:2 Uncaught TypeError: Cannot read property 'define' of undefined
    at dalLoadLanguage (en.js:2)
    at autocomplete_light.js:106
    at autocomplete_light.js:217

Both Chrome and Firefox highlight that n is undefined at the n.define call at the start of en.js:

var dalLoadLanguage=function(e){var n;e&&e.fn&&e.fn.select2&&e.fn.select2.amd&&(n=e.fn.select2.amd),n.define("select2/i18n/en",[],function()   ...

Not sure where to begin trying to resolve.

jpic commented 3 years ago

Does it work when you load jQuery prior to form.media ?

https://github.com/yourlabs/django-autocomplete-light/issues/1196#issuecomment-721308318

vecchp commented 3 years ago

I am also running into this problem after ensuring jQuery is loaded.

aliceni commented 3 years ago

I have the same issue with V3.8. It will also have the following error in django admin: The language file for "./i18n/en-us" could not be automatically loaded. A fallback will be used instead. Same issue with https://github.com/yourlabs/django-autocomplete-light/issues/782 But V3.5.1 works well.

jpic commented 3 years ago

Can you reproduce in an example project so that we can have our hands on your use case and try to debug it for you ?

wandrogo commented 3 years ago

I had the same issue with V3.8.1 as well, "fix" was to downgrade DAL to 3.5.1..

leetucker commented 3 years ago

I am experiencing the same problem with Django 3.1.6 + DAL 3.8.1. I don't have an example project at the moment in which I can reproduce it, although I may try to make a simplified one. I think that the issue appears to be present in all of the views in which I am using DAL.

I'm wondering if the issue relates to either jQuery or select2 being loaded more than once? Right now I'm loading jquery.min.js, jquery.init.js, and assigning "$" and "django" to django.jQuery all in the of my document. However, when I look at the source code where form.media appears, I'm seeing related scripts loaded in the following order:

"/static/admin/js/vendor/select2/select2.full.js"
"/static/admin/js/vendor/jquery/jquery.js"
"/static/autocomplete_light/autocomplete_light.js"
"/static/admin/js/jquery.init.js"
"/static/autocomplete_light/select2.js"
"/static/autocomplete_light/i18n/en.js"

None of these are called directly by my form's form.media, though I am using a couple of other extensions (django-filer, Django CMS) that could have something to do with it.

I'm continuing to investigate, if I can get a demo project working that replicates the issue I'll post it here.

jpic commented 3 years ago

For sure, the best is to load only one jquery @danielmorell any recommendation perhaps?

leetucker commented 3 years ago

FYI, in case this helps anyone, I was eventually able to resolve my issue. In my case, I was getting this error because django-filer was loading a second copy of jQuery through its widget media. I was already manually including jQuery via the template. So, I fixed it by modifying the form media() method to drop jQuery from the list of media assets.

I definitely look forward to the release of django-autocomplete-light with Webcomponents. Diagnosing issues like this can be pretty tricky!

JupyterChu commented 3 years ago

I had the same issue with V3.8.1 as well, "fix" was to downgrade DAL to 3.5.1..

it woeked for me!!!

anshul-aggarwal commented 3 years ago

I had the same issue with V3.8.1 as well, "fix" was to downgrade DAL to 3.5.1..

This worked for me as well! Python 3.9, Django 3.1.7.

gamesbook commented 3 years ago

I definitely look forward to the release of django-autocomplete-light with Webcomponents. Diagnosing issues like this can be pretty tricky!

Is this the only possible definitive patch to the problem - is there any other intermediate fix that can be pushed?

sae13 commented 3 years ago

I had the same issue with V3.8.1 as well, "fix" was to downgrade DAL to 3.5.1..

im obsessive with updates :( i did this

nlarusstone commented 3 years ago

I also had this issue when trying to load DAL and Handsontable in the same template. Downgrading to DAL 3.5.1 worked. Another thing that worked was to remove the call to <script src="/static/admin/js/jquery.init.js"></script> and replace it with a call to

    <script>
    window.django = {jQuery: jQuery.noConflict(false)};
    </script>

This is essentially what the init script does, except we're not removing the JQuery variables from the global script (which I think is what was breaking).

j-bernard commented 3 years ago

I also have the same issue. Actually I do not have django.contrib.admin in my INSTALLED_APPS and adding it would solve the issue. Any clue on how to fix this issue without admin app enabled?

jpic commented 3 years ago

Ultimately the solution is removing JS layers, as in #1170 with the autocomplete-light component, it's not in my short term plans to finish it, but it's basically working and ready to finish with new examples, documentation and test cases.

It also requires web components support from the browser and last time I checked safari was lagging at that too, so there's also that.

gnuletik commented 2 years ago

I was able to fix this issue without editing other scripts (inserted by external libraries) by adding this hacky script early :

window.addEventListener('load', function () {
  django.jQuery = jQuery
})

My root issue was that two versions of jQuery are inserted on the same page. However, that was quite tricky to remove one version without breaking external libraries. I guess one version of jQuery has select2 functions and one doesn't.

adiletto64 commented 2 years ago

Hi, I have solved this problem by removing "defer" from other scripts

sajeell commented 1 year ago

3.5.1

This worked

Henri-J-Norden commented 1 month ago

I just encountered this issue with DAL 3.11.0 when trying to use django-dynamic-raw-id in the same ModelAdmin.

Cause

In this case, it seems the issue is caused by the JS scripts being reordered, as django-dynamic-raw-id set the media attribute in its widgets:

@property
class DynamicRawIDWidget(widgets.ForeignKeyRawIdWidget):
    ...
    def media(self) -> forms.Media:
        return forms.Media(
            js=[
                "admin/js/vendor/jquery/jquery.min.js",
                "admin/js/jquery.init.js",
                "admin/js/core.js",
                "dynamic_raw_id/js/dynamic_raw_id.js",
            ]
        )

Workaround

I found that copying the media definition into my ModelAdmin class fixes the script order for some reason and therefore solves the DAL issue:

@admin.register(FOO)
class FOOAdmin(
    DynamicRawIDMixin,
    ModelAdmin
):
    class Media:
        js = [
            # Duplicates DynamicRawIDWidget.media here, otherwise DynamicRawIDMixin breaks DAL (autocomplete light)!
            "admin/js/vendor/jquery/jquery.min.js",
            "admin/js/jquery.init.js",
            "admin/js/core.js",
            "dynamic_raw_id/js/dynamic_raw_id.js",
        ]

ahmadatiya-citylitics commented 2 days ago

We're currently facing this issue when using django-admin-filters, which seems to import a separate outdated version of jQuery, and therefore causes the "double jQuery" issue that others are seeing. The symptom, as others have stated is the "Cannot read property 'define' of undefined at dalLoadLanguage'

I had the same issue with V3.8.1 as well, "fix" was to downgrade DAL to 3.5.1..

Unfortunately, this "fix" is no longer relevant, since v3.8.0 replaces DOMNodeInserted with MutationObserver. DOMNodeInserted is part of the Mutation Events considered obsolete by W3C and were deprecated in Chrome in July 2024, and likely other Chromium browsers.

jpic commented 1 day ago

If thought dal was shipping a bundled script with its own namespaces jQuery

Nonetheless, we apparently need another implementation based on whatever superseeds the mutation observer

Le jeu. 5 sept. 2024, 16:02, Ahmad @.***> a écrit :

We're currently facing this issue when using django-admin-filters https://pypi.org/project/django-admin-filter/, which seems to import a separate outdated version of jQuery, and therefore causes the "double jQuery" issue that others are seeing. The symptom, as others have stated is the "Cannot read property 'define' of undefined at dalLoadLanguage'

I had the same issue with V3.8.1 as well, "fix" was to downgrade DAL to 3.5.1..

Unfortunately, this "fix" no longer works, since v3.8.0 replaces DOMNodeInserted with MutationObserver https://github.com/yourlabs/django-autocomplete-light/blob/45a9ff6e95e58348b90b3c1f01f01cb6ca10b4d3/CHANGELOG#L194. DOMNodeInserted is part of the Mutation Events considered obsolete by W3C https://w3c.github.io/uievents/#legacy-event-types and were deprecated in Chrome in July 2024 https://developer.chrome.com/blog/mutation-events-deprecation, and likely other Chromium browsers.

— Reply to this email directly, view it on GitHub https://github.com/yourlabs/django-autocomplete-light/issues/1195#issuecomment-2331767011, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAAXDLF4JH4OMLZASZFHRN3ZVBP5PAVCNFSM6AAAAABKXQQ4G6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGMZRG43DOMBRGE . You are receiving this because you commented.Message ID: @.***>

yourlabs / django-autocomplete-light

Cannot read property 'define' of undefined at dalLoadLanguage #1195

Cause

Workaround