Uncaught TypeError: Cannot set property '$' of undefined

mathishuettl

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();
});

mathishuettl

help me pls ...

tangerine

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

mathishuettl

i installed these two packages:

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

allan

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

Allan

mathishuettl

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

mathishuettl

Link: http://p408166.mittwaldserver.info/kursuebersicht/

tangerine

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

mathishuettl

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

bindrid

down in the code I see

this.$ = function ....

this line does not make sense to me

mathishuettl

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

this.$ = function ( sSelector, oOpts )
{
    return this.api(true).$( sSelector, oOpts );
};

allan

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

mathishuettl

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

mathishuettl

no idea?

allan

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

mathishuettl

Hello,

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

allan

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

Thanks,
Allan

mathishuettl

i just updated the code

allan

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

mathishuettl

because jquery already gets loaded from wordpress

allan

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

mathishuettl

done but same error

allan

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

mathishuettl

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

allan

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

Allan

arodrigueze

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..

tap52384

You could try using the solution shown here:

https://github.com/yajra/dt54/blob/master/resources/assets/js/bootstrap.js

Twansparant

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

jgritten

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

allan

Can you show me your full file please?

Thanks,
Allan

keymastervn

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