Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Cannot read properties of undefined (reading 'load')

See original GitHub issue

Bug Description

There have been four users who referenced the below dashboard error, all within the same week: Cannot read properties of undefined (reading 'load')

https://wordpress.org/support/topic/site-kit-encountered-an-error-49/ | Open | SH info
https://wordpress.org/support/topic/error-detected-3/#post-14888496 | Open | No SH info at this point
https://wordpress.org/support/topic/cannot-read-properties-of-undefined-reading-load | Open | No SH info at this point

While awaiting details from one impacted user on the first report this only occurs when selecting specific reporting periods on the primary Site Kit dashboard - all expect the 28 day reporting period. This occurs consistently for this user, and doesn’t occur in troubleshooting mode (using the Health Check plugin).

This is likely as a result of a plugin or theme conflict. Awaiting for checks and details from impacted users

Additional Context

Plugin Version: 1.41.0
This only started to occur from 1.41.0
No previous reports until last week
One user (not the original reporter) stated that this occurred once PageSpeed Insights was activated, within one of the support forum threads. Once they “cleared the error” it no longer occurred
The issue does still remain incognito mode
The issue no longer occurs in troubleshooting mode using the Health Check & Troubleshooting plugin for one user (performing other checks at present to try and pinpoint the issue)
No browser console errors provided yet

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

All Site Kit dashboard screens should proactively define the window.google as undefined to avoid a potential error when charts are initializing. See https://github.com/google/site-kit-wp/issues/4074#issuecomment-967364462 for more information

Original AC

The Google charts library should be rolled back to the hard-coded 49 version, as the newer versions are still causing a high number of errors.
- In a future issue we should explore updating again but rule out that those errors happen. It will probably be a much larger effort, but this is a critical problem that we need to get out for the upcoming release.

Implementation Brief

Add a new JS module assets/js/util/initialize-google-global
- Document this as a side-effect import with no exports
- Conditionally set the google global to undefined if window does not hasOwnProperty('google')
Import this as the first import in assets/js/components/GoogleChart.js and document similar to https://github.com/google/site-kit-wp/blob/5c556a874282335f4936f4f9a1a698e0a19c1bd6/.storybook/preview.js#L31-L32

Original IB

Change GoogleChart to use version 49 again (undoing the change here https://github.com/google/site-kit-wp/pull/3881/files#diff-e632e2b02991386dad9213942af598e92c8fbd29e11e8fe4b58b0533fcf8698d)
Merge #4098

Test Coverage

Test rendering two GoogleCharts with a <div id="google" /> element on the page, the second one rendering after the first is visible/ready to ensure loading after the fact does not raise an error

QA Brief

Install and activate User Profile Picture.
Visit SiteKit Dashboard and make sure the charts are loading without the error. (in UI or console).

Changelog entry

Fix a potential conflict with google global when loading Google charts.

Issue Analytics

State:
Created 2 years ago
Comments:43 (7 by maintainers)

Top GitHub Comments

3reactions

jamesozziecommented, Nov 12, 2021

This occurs with this Site Kit and the User Profile Picture plugin active (recording).

This plugin is evident on other users sites from checking their Site Health info.

I don’t see any reference to the Google Charts Library API within the plugin however the plugin is open source. (GitHub repo)

Site Health info

### wp-core ###

version: 5.8.2
site_language: en_US
user_language: en_US
timezone: +00:00
permalink: /%year%/%monthnum%/%day%/%postname%/
https_status: true
multisite: false
user_registration: 0
blog_public: 1
default_comment_status: open
environment_type: production
user_count: 2
dotorg_communication: true

### wp-paths-sizes ###

wordpress_path: /home/ccreygrp/public_html/funk.ie
wordpress_size: 43.72 MB (45839213 bytes)
uploads_path: /home/ccreygrp/public_html/funk.ie/wp-content/uploads
uploads_size: 14.55 MB (15260435 bytes)
themes_path: /home/ccreygrp/public_html/funk.ie/wp-content/themes
themes_size: 144.38 MB (151388982 bytes)
plugins_path: /home/ccreygrp/public_html/funk.ie/wp-content/plugins
plugins_size: 188.56 MB (197714359 bytes)
database_size: 11.98 MB (12566528 bytes)
total_size: 403.18 MB (422769517 bytes)

### wp-dropins (2) ###

db.php: true
maintenance.php: true

### wp-active-theme ###

name: Twenty Twenty-One (twentytwentyone)
version: 1.4
author: the WordPress team
author_website: https://wordpress.org/
parent_theme: none
theme_features: core-block-patterns, widgets-block-editor, automatic-feed-links, title-tag, post-formats, post-thumbnails, menus, html5, custom-logo, customize-selective-refresh-widgets, wp-block-styles, align-wide, editor-styles, editor-style, editor-font-sizes, custom-background, editor-color-palette, editor-gradient-presets, responsive-embeds, custom-line-height, experimental-link-color, custom-spacing, custom-units, widgets
theme_path: /home/ccreygrp/public_html/funk.ie/wp-content/themes/twentytwentyone
auto_update: Disabled

### wp-themes-inactive (5) ###

ampface: version: 1.0.0, author: James Osborne, Auto-updates disabled
ampface - blogger child theme: version: 1.0, author: admin, Auto-updates disabled
The7: version: 9.16.0, author: Dream-Theme, Auto-updates disabled
Twenty Nineteen: version: 2.1, author: the WordPress team, Auto-updates disabled
Twenty Twenty: version: 1.8, author: the WordPress team, Auto-updates disabled

### wp-plugins-active (3) ###

Query Monitor: version: 3.7.1, author: John Blackbourn, Auto-updates disabled
Site Kit by Google: version: 1.45.0, author: Google, Auto-updates disabled
User Profile Picture: version: 2.6.0, author: Cozmoslabs, Auto-updates disabled

### wp-plugins-inactive (35) ###

Accept Stripe Payments: version: 2.0.47, author: Tips and Tricks HQ, wptipsntricks (latest version: 2.0.50), Auto-updates disabled
Add Featured Image Column: version: 1.1.6, author: Robin Cornett, Auto-updates disabled
Add Widget After Content: version: 2.4.2, author: Arelthia Phillips, Auto-updates disabled
Akismet Anti-Spam: version: 4.1.12, author: Automattic (latest version: 4.2.1), Auto-updates disabled
AMP: version: 2.1.4, author: AMP Project Contributors, Auto-updates disabled
Change Permalink Helper: version: 1.1.1, author: Frank Bültge, Auto-updates disabled
Contact Form 7: version: 5.4.2, author: Takayuki Miyoshi (latest version: 5.5.2), Auto-updates disabled
Convert Plus: version: 3.5.22, author: Brainstorm Force, Auto-updates disabled
Easy Footnotes: version: 1.1.5, author: Jason Yingling, Auto-updates disabled
Elementor: version: 3.4.4, author: Elementor.com (latest version: 3.4.7), Auto-updates disabled
Give - Donation Plugin: version: 2.13.4, author: GiveWP (latest version: 2.16.1), Auto-updates disabled
Go Pricing - WordPress Responsive Pricing Tables: version: 3.3.18, author: Granth, Auto-updates disabled
Hello Dolly: version: 1.7.2, author: Matt Mullenweg, Auto-updates disabled
Hotel Booking Lite: version: 3.9.13, author: MotoPress, Auto-updates disabled
Lazy Load - Optimize Images: version: 2.3.4, author: WP Rocket, Auto-updates disabled
Media Deduper: version: 1.5.3, author: Cornershop Creative, Auto-updates disabled
Meks Easy Social Share: version: 1.2.6, author: Meks, Auto-updates disabled
Meks Flexible Shortcodes: version: 1.3.3, author: Meks, Auto-updates disabled
Meks Smart Social Widget: version: 1.5, author: Meks, Auto-updates disabled
Meks Time Ago: author: (undefined), version: 1.1.6, Auto-updates disabled
Modern Events Calendar Lite: version: 5.22.2, author: Webnus (latest version: 6.1.5), Auto-updates disabled
noindex SEO: version: 1.0.5, author: Javier Casares, Auto-updates disabled
OptinMonster: version: 2.6.7, author: OptinMonster Team, Auto-updates disabled
Recent Tweets Widget: version: 1.6.8, author: Noah Kagan, Auto-updates disabled
Redux: version: 4.3.1, author: Extendify (latest version: 4.3.2), Auto-updates disabled
RefTagger: version: 2.4.4, author: Logos Bible Software, Auto-updates disabled
Simple Banner: version: 2.10.6, author: Ryan Petersen, Auto-updates disabled
Slider Revolution: version: 6.5.5, author: ThemePunch, Auto-updates disabled
The7 CLI: version: 1.0.0, author: Dream-Theme, Auto-updates disabled
The7 Elements: version: 2.5.7.1, author: Dream-Theme, Auto-updates disabled
TI WooCommerce Wishlist: version: 1.28.4, author: TemplateInvaders, Auto-updates disabled
Ultimate Addons for WPBakery Page Builder: version: 3.19.11, author: Brainstorm Force, Auto-updates disabled
Wordfence Security: version: 7.5.6, author: Wordfence, Auto-updates disabled
WPBakery Page Builder: version: 6.6.0.1, author: Michael M - WPBakery.com, Auto-updates disabled
Yoast SEO: version: 17.5, author: Team Yoast, Auto-updates disabled

### wp-media ###

image_editor: WP_Image_Editor_GD
imagick_module_version: Not available
imagemagick_version: Not available
imagick_version: Not available
file_uploads: File uploads is turned off
post_max_size: 1024M
upload_max_filesize: 1024M
max_effective_size: 1 GB
max_file_uploads: 20
gd_version: bundled (2.1.0 compatible)
gd_formats: GIF, JPEG, PNG, WebP, BMP, XPM
ghostscript_version: unknown

### wp-server ###

server_architecture: Linux 3.10.0-962.3.2.lve1.5.52.el7.x86_64 x86_64
httpd_software: Apache
php_version: 7.3.32 64bit
php_sapi: fpm-fcgi
max_input_variables: 1000
time_limit: 90
memory_limit: 256M
max_input_time: 90
upload_max_filesize: 1024M
php_post_max_size: 1024M
curl_version: 7.79.1 OpenSSL/1.1.1l
suhosin: false
imagick_availability: false
pretty_permalinks: true
htaccess_extra_rules: true

### wp-database ###

extension: mysqli
server_version: 10.3.31-MariaDB-cll-lve
client_version: mysqlnd 5.0.12-dev - 20150407 - $Id: 7cc7cc96e675f6d72e5cf0f267f48e167c2abb23 $

### wp-constants ###

WP_HOME: undefined
WP_SITEURL: undefined
WP_CONTENT_DIR: /home/ccreygrp/public_html/funk.ie/wp-content
WP_PLUGIN_DIR: /home/ccreygrp/public_html/funk.ie/wp-content/plugins
WP_MEMORY_LIMIT: 40M
WP_MAX_MEMORY_LIMIT: 256M
WP_DEBUG: false
WP_DEBUG_DISPLAY: true
WP_DEBUG_LOG: false
SCRIPT_DEBUG: false
WP_CACHE: false
CONCATENATE_SCRIPTS: undefined
COMPRESS_SCRIPTS: undefined
COMPRESS_CSS: undefined
WP_LOCAL_DEV: undefined
DB_CHARSET: utf8mb4
DB_COLLATE: undefined

### wp-filesystem ###

wordpress: writable
wp-content: writable
uploads: writable
plugins: writable
themes: writable

### google-site-kit ###

version: 1.45.0
php_version: 7.3.32
wp_version: 5.8.2
reference_url: https://funk.ie
amp_mode: no
site_status: connected-site
user_status: authenticated
verification_status: verified-file
connected_user_count: 2
active_modules: site-verification, search-console, adsense, analytics, analytics-4, pagespeed-insights, tagmanager
required_scopes: 
	openid: ✅
	https://www.googleapis.com/auth/userinfo.profile: ✅
	https://www.googleapis.com/auth/userinfo.email: ✅
	https://www.googleapis.com/auth/siteverification: ✅
	https://www.googleapis.com/auth/webmasters: ✅
	https://www.googleapis.com/auth/adsense.readonly: ✅
	https://www.googleapis.com/auth/analytics.readonly: ✅
	https://www.googleapis.com/auth/tagmanager.readonly: ✅
capabilities: 
	googlesitekit_authenticate: ✅
	googlesitekit_setup: ✅
	googlesitekit_view_posts_insights: ✅
	googlesitekit_view_dashboard: ✅
	googlesitekit_view_module_details: ✅
	googlesitekit_manage_options: ✅
enabled_features: 
	ideaHubModule: ⭕
	serviceSetupV2: ⭕
	swgModule: ⭕
	userInput: ⭕
	unifiedDashboard: ⭕
search_console_property: https://funk.ie/
adsense_account_id: pub-346•••••••••••••
adsense_client_id: ca-pub-346•••••••••••••
adsense_account_status: approved
adsense_use_snippet: yes
adsense_web_stories_adunit_id: none
analytics_account_id: 1667•••••
analytics_property_id: UA-1667•••••••
analytics_profile_id: 2186•••••
analytics_use_snippet: yes
analytics_4_property_id: 2816959••
analytics_4_web_data_stream_id: 2731••••••
analytics_4_measurement_id: G-GN••••••••
analytics_4_use_snippet: yes
tagmanager_account_id: 6004••••••
tagmanager_container_id: GTM-K7C••••
tagmanager_amp_container_id: none
tagmanager_use_snippet: yes

Console Errors

googlesitekit-vendor…563ac6f603e46d.js:1 TypeError: Cannot read properties of undefined (reading 'load')
    at GoogleChartLoader.t.handleGoogleChartsLoaderScriptLoaded (googlesitekit-vendor…563ac6f603e46d.js:1)
    at onLoad (googlesitekit-vendor…563ac6f603e46d.js:1)
    at Script.value (googlesitekit-vendor…563ac6f603e46d.js:1)
    at ya (googlesitekit-vendor…563ac6f603e46d.js:1)
    at t.unstable_runWithPriority (googlesitekit-vendor…563ac6f603e46d.js:1)
    at Mr (googlesitekit-vendor…563ac6f603e46d.js:1)
    at Yj (googlesitekit-vendor…563ac6f603e46d.js:1)
    at Lj (googlesitekit-vendor…563ac6f603e46d.js:1)
    at googlesitekit-vendor…563ac6f603e46d.js:1
    at t.unstable_runWithPriority (googlesitekit-vendor…563ac6f603e46d.js:1)
Pi	@	googlesitekit-vendor…563ac6f603e46d.js:1
googlesitekit-module…6be5e2182ac25.js:21 Caught an error: TypeError: Cannot read properties of undefined (reading 'load')
    at GoogleChartLoader.t.handleGoogleChartsLoaderScriptLoaded (googlesitekit-vendor…563ac6f603e46d.js:1)
    at onLoad (googlesitekit-vendor…563ac6f603e46d.js:1)
    at Script.value (googlesitekit-vendor…563ac6f603e46d.js:1)
    at ya (googlesitekit-vendor…563ac6f603e46d.js:1)
    at t.unstable_runWithPriority (googlesitekit-vendor…563ac6f603e46d.js:1)
    at Mr (googlesitekit-vendor…563ac6f603e46d.js:1)
    at Yj (googlesitekit-vendor…563ac6f603e46d.js:1)
    at Lj (googlesitekit-vendor…563ac6f603e46d.js:1)
    at googlesitekit-vendor…563ac6f603e46d.js:1
    at t.unstable_runWithPriority (googlesitekit-vendor…563ac6f603e46d.js:1) 
Object
componentStack: "\n    in Script\n    in GoogleChartLoader\n    in ContextProvider\n    in Chart\n    in div\n    in GoogleChart\n    in div\n    in Cell\n    in div\n    in Row\n    in div\n    in Grid\n    in SiteStats\n    in div\n    in div\n    in Widget\n    in WithWidgetSlug(Widget)\n    in ModuleOverviewWidget\n    in WidgetRenderer\n    in div\n    in Cell\n    in WidgetCellWrapper\n    in div\n    in Row\n    in div\n    in div\n    in Grid\n    in WidgetAreaRenderer\n    in div\n    in WidgetContextRenderer\n    in ModuleApp\n    in GoogleSitekitModule\n    in RestoreSnapshots\n    in ErrorHandler\n    in Root"
[[Prototype]]: Object
constructor: ƒ Object()
hasOwnProperty: ƒ hasOwnProperty()
isPrototypeOf: ƒ isPrototypeOf()
propertyIsEnumerable: ƒ propertyIsEnumerable()
toLocaleString: ƒ toLocaleString()
toString: ƒ toString()
valueOf: ƒ valueOf()
__defineGetter__: ƒ __defineGetter__()
__defineSetter__: ƒ __defineSetter__()
__lookupGetter__: ƒ __lookupGetter__()
__lookupSetter__: ƒ __lookupSetter__()
__proto__: (...)
get __proto__: ƒ __proto__()
set __proto__: ƒ __proto__()

In order to recreate this issue setup a site and install and active the User Profile Photo plugin. A workaround for this impacted at present is to temporarily deactivate the User Profile plugin when viewing the Site Kit dashboards.

@aaemnnosttv Do you want me to share credentials for the impacted site? I don’t see any independent scripts output on wp-admin from the plugin however I’m happy to review the plugin further.

2reactions

aaemnnosttvcommented, Nov 15, 2021

@felixarntz after digging into this a bit more the problem seems to be rooted in the charts loader script itself. I’ve raised this upstream where it may be fixable without any update to Site Kit since loader.js is unversioned.

https://github.com/google/google-visualization-issues/issues/2936

The problem in our case (in conjunction with this bug) is due to how the react-google-charts library works in that it renders a GoogleChartLoader with every GoogleChart. The GoogleChartLoader is where the error is raised. There isn’t inherently a problem with this loader being rendered multiple times; it only adds the loader script once, but it does register an onLoad callback for each instance which in turn will call google.charts.load(... for each one due to the way react-load-script works, which essentially queues all the onLoad and onError callbacks for a given URL when rendered multiple times. Nothing particularly wrong with that either, but what happens is that when loader.js is loaded with an #google element on the page, the loader ends up assigning its properties to the DOM element instance referenced on the window. Then when the charts are actually loaded (google.charts.load), somewhere between this and when the charts onLoadCallback is called, window.google is properly assigned which breaks the association with the element previously referenced, so what would normally be on window.google is split across two separate objects. If we were only rendering a single chart, this likely be unnoticeable because the first call to google.charts.load will always work.

However, due to the multiple calls to google.charts.load via the GoogleChartLoader, this is where we run the risk of the error shown in this issue. The only requirement is that the charts don’t all load at the same time (i.e. cold cache). It’s much less likely for this to happen with a primed request cache due to the time between charts loading and the specific charts version being loaded (as a result of google.charts.load(version).

Again, the issue seems to be rooted in the charts loader.js (see the issue referenced above where I’ve included a repo which shows this reproduced on a simple html page) in which case we may not need to update anything here to fix it for everyone, although that might depend on how long it takes for a fix to be implemented upstream.