List.js doesn't work in Elementor widget - WooCommerce products

[gonzalesc]

Hi.

I have a shortcode that displays the WC products in a table using List.js. It works : example1 here

I then created an Elementor widget that uses the same shortcode to display the WC products table, and it works but the List.js shows and error:

Uncaught TypeError: Cannot read properties of undefined (reading 'childNodes') here : example2 here

I have tried using Elementor hooks on the frontend, but it always shows the error.

jQuery( window ).on( 'elementor/frontend/init', () => {
    const addHandler = ( $element ) => {
        
        console.log('hello');
        console.log($element);

        console.log( $element.find( 'table tbody' ).html() );

        const wcProductTable = new List( 'wc-product-table', {
            valueNames: ['image', 'name', 'stock', 'stock_status', 'qty', 'price', 'rating', 'variations', 'cart', 'price_raw', 'rating_raw', 'sales_raw', 'creation_raw'],
            page: 11,
            pagination: true
        } );
    };
 
    elementorFrontend.hooks.addAction( 'frontend/element_ready/wc_product_table.default', addHandler );
 } );

and, just for testing, I used setTimeOut with 6 seconds (to wait for the whole page to load) and the error was the same.

setTimeout( () => {
    const wcProductTable = new List( 'wc-product-table', {
            valueNames: ['image', 'name', 'stock', 'stock_status', 'qty', 'price', 'rating', 'variations', 'cart', 'price_raw', 'rating_raw', 'sales_raw', 'creation_raw'],
            page: 11,
            pagination: true
        } );
}, 6000 );

Note: This script Js depends of List.js and Elementor Fronted : [ 'list-table', 'elementor-frontend' ]

Please, any advice?