Not sharing single instance of jQuery/simple assignment failing?

Question

I don't know how to explain this one. I'm trying to debug import 'datatables.net' isn't setting $.fn.dataTable. My theory was that I have 2 copies of jquery.

To debug I added

$.poop = 345
$.fn.somethingUnique = 123

before

import factory from 'datatables.net'

Then I added a break statement inside jquery.dataTables.mjs which appears to be the file that webpack is loading.

If you look at the "Watch" on the right there (in Chrome devtools) you will see $.poop is undefined but jQuery.poop is set as expected.

If you look on the left there, there's a line let $ = jQuery;

So if they're equivalent... how can they not be equivalent? What's going on here?

Answer 1

I think that was exactly it, datatables.net was importing jQuery 3. DevTools was tricking me by showing the uncompiled code.

Adding

    "resolutions": {
        "jquery": "^2"
    },

to package.json fixed it for me (using yarn 3.x)