Passing PHP array to javascript breaks other scripts

I am building an application to display and manipulate statistics in wordpress.

I am getting my data from google sheets and passing it to the script through wp_localize_script.

I just noticed that doing this breaks javascript functionality in other scripts although I have no idea why.

I have tried also to not use wp_localize_script but to print the variable in the head. The result was the same.


getting the data from Sheets:

function get_stats_from_sheets()
        require_once dirname(dirname(__FILE__)) . '/stat-interface/vendor/autoload.php';
        $ranges = ["'GI'!A1:F", "'dsfdf'!A1:C", "'dfd'!A1:G", "'dsfdf'!A1:B", "'dsfdsf'!A1:D"];
        $params = ['ranges' => $ranges, 'majorDimension' => 'COLUMNS'];
        $client = new GoogleClient();

        $service = new Google_Service_Sheets($client);
        $response = $service->spreadsheets_values->batchGet($spreadsheetId, $params);
        $array = (array) $response;
        $data = $array['valueRanges'];
        return $data;

Localize script and other loaded scripts:

add_action('wp_enqueue_scripts', 'my_custom_script_load', 11);

function my_custom_script_load(){
    if (is_page(603484)):
    wp_enqueue_script('spamspan', get_stylesheet_directory_uri() . '/js/spamspan.js', array('jquery'), '0.2', true);

        wp_enqueue_style('stat', get_stylesheet_directory_uri() . '/css/stat.css');
        wp_enqueue_script('chartJs', '', '', '', true);
        wp_enqueue_script('ublcharts', get_stylesheet_directory_uri() . '/js/ublcharts.js', '', '', true);
        wp_localize_script('ublcharts', 'statsData', get_stats_from_sheets());
        wp_enqueue_script('bootstrap', '', array('jquery'), '', false);
        wp_enqueue_style('bootstrapCss', '');
        wp_enqueue_script('pdfmake', '', '', true);
        wp_enqueue_script('vfs_fonts', '', '', '', true);
        wp_register_script('stat-pdf', get_stylesheet_directory_uri() . '/js/stat-pdf.js', '', '', true);
        wp_localize_script('stat-pdf', 'home_url', array('url' => get_stylesheet_directory_uri(), 'home' => get_home_url()));

Errors received:

Uncaught TypeError: document.createTextNode is not a function
    at spamSpan (spamspan.js?ver=0.2:50)

_microtask.js:36 Uncaught (in promise) TypeError: document.createTextNode is not a function
    at t.exports (_microtask.js:36)
    at Object.i.m.n (es6.promise.js:13)
    at i (bootstrap:19)
    at Object.i.m.n (promise.js:4)
    at i (bootstrap:19)
    at Object.i.m.n (promise.js:1)
    at i (bootstrap:19)
    at Object.<anonymous> (index.js:29)
    at Object.i.m.n (pdfmake.min.js?ver=1:37)
    at i (bootstrap:19)

the spamspan error is not really important to me, but it was an indicator that something was breaking (the potential reason why my pdf script doesn’t work).

Disabling all other scripts and enqueues, I narrowed it down to the localized data from google. When the variable is not passed, everything works fine, but obviously I need it, there is no way around that.

The second error message occurs when I try to generate a pdf through pdfmake.js with the variable. In both cases it says ‘document.createTextNode is not a function’.

I use pdfmake.js also on other pages and there it works without problems, so I took the working code pdfmake script and stripped it down to a minimum and tested it, but I get the above error message no matter what.

Can anybody tell me why this is happening and how to avoid it?

Source link