Uncaught TypeError: Cannot set property '$' of undefined

Uncaught TypeError: Cannot set property '$' of undefined

mathishuettlmathishuettl Posts: 14Questions: 1Answers: 0

Hello,

I wanted to use DataTables in my wordpress theme but it doesn't work. I get the error above...

I installed DataTables with npm. My main.js looks like this:

var $ = jQuery;
var dt = require("datatables.net")();


$(document).ready(function() {
    $(".datatable").DataTable();
});
«1

Answers

  • mathishuettlmathishuettl Posts: 14Questions: 1Answers: 0

    help me pls ...

  • tangerinetangerine Posts: 3,342Questions: 35Answers: 394

    Did you use DataTables' NPM package manager?
    https://datatables.net/download/npm

  • mathishuettlmathishuettl Posts: 14Questions: 1Answers: 0

    i installed these two packages:

    npm install datatables.net
    npm install datatables.net-dt

  • allanallan Posts: 61,439Questions: 1Answers: 10,053 Site admin

    Can you link to a test case showing the issue please. The looks like it should work without issue.

    Allan

  • mathishuettlmathishuettl Posts: 14Questions: 1Answers: 0

    right now the site is local, but it will be soon on the server. I post the link asap.

  • tangerinetangerine Posts: 3,342Questions: 35Answers: 394

    Is main.js an actual script file? I don't see it in your code.

  • mathishuettlmathishuettl Posts: 14Questions: 1Answers: 0

    no it gets bundled so it's called app.js

  • bindridbindrid Posts: 730Questions: 0Answers: 119

    down in the code I see

    this.$ = function ....
    
    

    this line does not make sense to me

  • mathishuettlmathishuettl Posts: 14Questions: 1Answers: 0
    edited June 2017

    that's true, but this line come from jquery.dataTables.js

    this.$ = function ( sSelector, oOpts )
    {
        return this.api(true).$( sSelector, oOpts );
    };
    
    
  • allanallan Posts: 61,439Questions: 1Answers: 10,053 Site admin

    this in that context is the jQuery object - so basically its extending the jQuery object that was used to create the DataTable. That's how the legacy API was built, and it does also run if you use the modern API.

    The WebPack file uses:

        $(document).ready(function() {
            var dt = __webpack_require__(2)(document, $);
            var pushy = __webpack_require__(4);
        });
    

    But the first argument (if given) to the DataTables require package function should be window. However, your code above doesn't show any arguments being used.

    Is the original source file available on the server? Or perhaps a map for the packaged file?

    Allan

  • mathishuettlmathishuettl Posts: 14Questions: 1Answers: 0

    Hello,

    i tried also with window as parameter but still doesn't work.

    Source File: http://p408166.mittwaldserver.info/wp-content/themes/brandschutz/src/main.js

  • mathishuettlmathishuettl Posts: 14Questions: 1Answers: 0

    no idea?

  • allanallan Posts: 61,439Questions: 1Answers: 10,053 Site admin

    Sorry for the delay - I lost it among the other posts.

    Try taking var dt = require("datatables.net")(window, $); out of the document ready function. Just put it below the var $ = jQuery;.

    Allan

  • mathishuettlmathishuettl Posts: 14Questions: 1Answers: 0

    Hello,

    thanks for you reply. I already tried this but same Error...

  • allanallan Posts: 61,439Questions: 1Answers: 10,053 Site admin

    Could you update your demo code to remove the require from the document ready function please?

    Thanks,
    Allan

  • mathishuettlmathishuettl Posts: 14Questions: 1Answers: 0

    i just updated the code

  • allanallan Posts: 61,439Questions: 1Answers: 10,053 Site admin

    I think it is this:

    var $ = jQuery;
    var dt = require("datatables.net")(window, $);
    

    It should be:

    var $ = require('jquery');
    var dt = require("datatables.net")(window, $);
    

    Is there a reason you aren't doing a require on jquery at the moment?

    Allan

  • mathishuettlmathishuettl Posts: 14Questions: 1Answers: 0

    because jquery already gets loaded from wordpress

  • allanallan Posts: 61,439Questions: 1Answers: 10,053 Site admin

    Ah! I'm finally with it. You are running AMD rather than CommonJS. Yup - fair enough and I'll update my documentation about this shortly.

    In the mean time, unlike with CommonJS, with an AMD loader for DataTables you don't need to execute a function:

    require("datatables.net");
    

    Where it might trip up is using WP's jQuery rather than the require() that it uses.

    Could you try that and let me know when its up?

    Allan

  • mathishuettlmathishuettl Posts: 14Questions: 1Answers: 0

    done but same error

  • allanallan Posts: 61,439Questions: 1Answers: 10,053 Site admin

    I'm now getting this error:

    Uncaught TypeError: $(...).DataTable is not a function

    That appears to be because DataTables uses this as its AMD loader:

            define( ['jquery'], function ( $ ) {
                return factory( $, window, document );
            } );
    

    So it isn't using your existing jQuery - its doing a require of its own. This is under the assumption that if DataTables was being AMD loaded, then jQuery would also be AMD loaded. That isn't the case - you are AMD loading DataTables, but jQuery is just a regular include.

    I'm frankly not sure what the right thing to do is when there is a mix of both, I don't really having come across that before.

    Perhaps DataTables should check if jQuery is already defined - but that's not something I've seen a AMD loader do before (at least - not as far as I can remember).

    Allan

  • mathishuettlmathishuettl Posts: 14Questions: 1Answers: 0

    okay thanks allan do you have any idea what i can do now?

  • allanallan Posts: 61,439Questions: 1Answers: 10,053 Site admin

    Can you just include DataTables using a regular <script> tag? If so, that would be the way to go just now.

    Allan

  • arodriguezearodrigueze Posts: 2Questions: 0Answers: 0
    edited August 2017

    Hi mathishuettl I hope that I'm not late to answer, but you could try to import datatable.net the next way:
    import dt from 'datatables.net';
    instead
    require("datatables.net");
    saludos..

  • tap52384tap52384 Posts: 1Questions: 0Answers: 0
  • TwansparantTwansparant Posts: 1Questions: 0Answers: 0

    For me, this was the only solution that worked:

    require('imports?define=>false!datatables.net')(window, $);
    

    like discussed here:
    https://github.com/DataTables/DataTables/issues/434

  • jgrittenjgritten Posts: 1Questions: 0Answers: 0

    Was there ever a definetive solution for this?
    Using the require('imports?define=>false!datatables.net')(window, $);
    just gets me the error "cannot resolve imports".

    Using simply require('datatables.net') with or without the extra (window, $) just gets me the error - "...Cannot set property '$' of undefined"

    thx for the help

  • allanallan Posts: 61,439Questions: 1Answers: 10,053 Site admin

    Can you show me your full file please?

    Thanks,
    Allan

  • keymastervnkeymastervn Posts: 1Questions: 0Answers: 0

    For using AMD loading, mostly webpack user

    import dt from 'datatables.net'
    

    Examples on responsive plugin

    import('datatables.net-dt')
    import('datatables.net-responsive-dt') 
    

    It would be better if we update these HOW-TOs

This discussion has been closed.