Loading datatables in wordpress functions.php not working

Murray

The following code in functions.php works fine in one Wordpress website but not in another.

function divi__child_theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    
    // add datatables css
    wp_enqueue_style( 'datatables-css', '//cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.13.1/b-2.3.3/b-html5-2.3.3/b-print-2.3.3/r-2.4.0/sl-1.5.0/datatables.css');
    
}
add_action( 'wp_enqueue_scripts', 'divi__child_theme_enqueue_styles' );

function divi__child_theme_register_scripts() {
    
    
    // add datatables js
    wp_enqueue_script( 'datatables-pdf-js', '//cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.js');
    wp_enqueue_script( 'datatables-fonts-js', '//cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js');
    wp_enqueue_script( 'datatables-datatables-js', '//cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.13.1/b-2.3.3/b-html5-2.3.3/b-print-2.3.3/r-2.4.0/sl-1.5.0/datatables.js');
    wp_enqueue_script( 'datatables-moment-js', '//cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.2/moment.min.js'); 
    
  
}
add_action( 'wp_enqueue_scripts', 'divi__child_theme_register_scripts' );

In the second site I get the following errors:-
Uncaught TypeError: Cannot read properties of undefined (reading 'textContent')
jquery-migrate.min.js?ver=3.4.1:2 JQMIGRATE: Migrate is installed, version 3.4.1
jquery.min.js?ver=3.7.1:2 jQuery.Deferred exception: jQuery(...).DataTable is not a function TypeError: jQuery(...).DataTable is not a function
at HTMLDocument.eval (eval at <anonymous> (https://hasi.com.au/newhasi/pricing/:2:127), <anonymous>:4:26)
at e (https://hasi.com.au/newhasi/wp-includes/js/jquery/jquery.min.js?ver=3.7.1:2:27028)
at t (https://hasi.com.au/newhasi/wp-includes/js/jquery/jquery.min.js?ver=3.7.1:2:27330) undefined
ce.Deferred.exceptionHook @ jquery.min.js?ver=3.7.1:2
jquery.min.js?ver=3.7.1:2 Uncaught TypeError: jQuery(...).DataTable is not a function
at HTMLDocument.eval (eval at <anonymous> (pricing/:2:127), <anonymous>:4:26)
at e (jquery.min.js?ver=3.7.1:2:27028)
at t (jquery.min.js?ver=3.7.1:2:27330)

Any ideas would be very welcome.

allan

I strongly suspect that you have jQuery being loaded multiple times. If you "View source" on your page and search of jQuery, I reckon you'll find a load order of jQuery, DataTables and then jQuery again (with plenty of other scripts in between them I'm sure).

What exactly that is happening will depend upon what plugins you are lading in WP.

Allan