Doesn't work with jQuery 3.4

Doesn't work with jQuery 3.4

goncalomarrafagoncalomarrafa Posts: 8Questions: 1Answers: 0

Hi.

I've upgraded jQuery to 3.4.1 and DataTables is no longer working. I've been using the BS4 variant but the vanilla one doesn't work either.

I get this error with datatables.net-bs4:

and this with vanilla datatables.net:

Everything works fine with jQuery 3.3.1. I'm using the latest version of DataTables. Am I missing something?

Thanks in advance.

Replies

  • colincolin Posts: 6,889Questions: 0Answers: 1,176

    Hi @goncalomarrafa ,

    It seems OK here. Could you look at that, please, and see if it helps. If it's still not working for you, please can you update my example, or link to your page, so that we can see the problem.

    Cheers,

    Colin

  • allanallan Posts: 50,876Questions: 1Answers: 7,626 Site admin

    It looks like the DataTables / Bootstrap 4 integration file is being loaded before the DataTables core JS file in that trace.

    Not sure that helps, but that is what appears to be happening. As Colin says, a link to a test case would be required for anything else.

    Allan

  • goncalomarrafagoncalomarrafa Posts: 8Questions: 1Answers: 0
    edited November 7

    Thanks @colin and @allan for your responses.

    I'm using laravel-mix (wrapper for webpack) to build my javascript assets. I should have mentioned it on the OP.

    This is a snippet of my datatables.js, which includes the library:

    require('datatables.net');
    require('datatables.net-bs4');
    
    // my code
    // ...
    

    In the OP, in both screenshots, there is a trace of included files... don't know if this is helpful or not...

    As I said, the exact same code works fine in jQuery 3.3.1 and errors in 3.4.1.

  • colincolin Posts: 6,889Questions: 0Answers: 1,176

    We would really need to see this to be able to progress it. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

    Cheers,

    Colin

  • goncalomarrafagoncalomarrafa Posts: 8Questions: 1Answers: 0

    @colin I can't link to the page because it's an internal project.

    As I said, I'm using webpack and can't really replicate the issue in live.datatables.net, JS bin and such.

    I can upload the compiled app.js and vendor.js if that helps... Or maybe you have another suggestion?

    Again, thanks for your help.

  • goncalomarrafagoncalomarrafa Posts: 8Questions: 1Answers: 0

    I've been fiddling with this and I think it might be an incompatibility between jQuery versions, because datatables.net ships with jQuery 3.3.1. Maybe somewhere in the build process the wrong instance gets passed around.

  • allanallan Posts: 50,876Questions: 1Answers: 7,626 Site admin

    Are you able to create a small repo that reproduces this so we can look into this please?

    I'm not aware of any compatibility issues and I've just had a look at the 3.4 release notes and there isn't anything obvious that would cause a problem (indeed, I'd be surprised if they broke NPM compat with a minor release).

    Allan

  • goncalomarrafagoncalomarrafa Posts: 8Questions: 1Answers: 0

    I'll try to create what you request and I'll post it here once it's ready.

    Meanwhile, here's what I can tell you now:

    Just requiring the package:

    require('datatables.net-bs4');
    

    I get:

    Uncaught TypeError: Cannot read property 'defaults' of undefined
        at dataTables.bootstrap4.js:48
        at Object.<anonymous> (dataTables.bootstrap4.js:18)
        at dataTables.bootstrap4.js:19
        at Object../node_modules/datatables.net-bs4/js/dataTables.bootstrap4.js (dataTables.bootstrap4.js:42)
        at __webpack_require__ (bootstrap:79)
        at Object../resources/js/datatables.js (datatables.js:6)
        at __webpack_require__ (bootstrap:79)
        at Object../resources/js/app.js (app.js:33)
        at __webpack_require__ (bootstrap:79)
        at Object.0 (app.js:517)
    

    The error seems to say that the core library is not yet loaded, so I loaded before:

    require('datatables.net');
    require('datatables.net-bs4');
    

    I still get the same error. Then I tried invoking:

    require('datatables.net')();
    require('datatables.net-bs4')();
    

    And the error changes to:

    jquery.dataTables.js:133 Uncaught TypeError: Cannot set property '$' of undefined
        at DataTable (jquery.dataTables.js:133)
        at Object../resources/js/datatables.js (datatables.js:5)
        at __webpack_require__ (bootstrap:79)
        at Object../resources/js/app.js (app.js:33)
        at __webpack_require__ (bootstrap:79)
        at Object.0 (app.js:518)
        at __webpack_require__ (bootstrap:79)
        at checkDeferredModules (bootstrap:45)
        at Array.webpackJsonpCallback [as push] (bootstrap:32)
        at app.js:1
    

    I also tried passing the window and $ params:

    require('datatables.net')(window, $);
    require('datatables.net-bs4')(window, $);
    

    But I get the same error as before.

    Thanks once again for you patience.

  • goncalomarrafagoncalomarrafa Posts: 8Questions: 1Answers: 0

    @allan So here's an update.

    Turns out I was having some kind of jQuery dependency version conflict. I had ^3.4 specified as jQuery's version but, somehow, datatables.net was installing it's own 3.3.1 version and binding to it. node_modules/datatables.net has it's own node_modules with jQuery 3.3.1 on it.

    I forced 3.4.1 as jQuery's version in package.json:

    "resolutions": {
        "jquery": "3.4.1"
    }
    

    This seems to fix the issue.

  • colincolin Posts: 6,889Questions: 0Answers: 1,176

    Glad you got it going, thanks for the update.

Sign In or Register to comment.