Disconnect fails with JavaScript errors with older WordPress 5.6

[haszari]

Describe the bug:

Just saw this issue, may not be easy to reproduce or high impact but wanted to log an issue for visibility. Note this was on my dev environment, with trunk build of WooCommerce, so may be unique to my setup.

Steps to reproduce:

1. Ensure store is connected to Pinterest.
2. Downgrade to WordPress 5.6.
3. Open browser dev tools console.
4. Go to Marketing > Pinterest > Connection, click Disconnect.

Expected behavior

Disconnect modal, then disconnect.

Actual behavior

• JavaScript errors in console.
• Blank admin screen.

Additional details

Status report

``` ### WordPress Environment ### WordPress address (URL): https://02f156b2fc81.ngrok.io Site address (URL): https://02f156b2fc81.ngrok.io WC Version: 5.6.0 REST API Version: ✔ 5.6.0 WC Blocks Version: ✔ 5.5.1 Action Scheduler Version: ✔ 3.2.1 WC Admin Version: ✔ 2.5.0-rc.1 Log Directory Writable: ✔ WP Version: ❌ 5.6 - There is a newer version of WordPress available (5.8) WP Multisite: – WP Memory Limit: 256 MB WP Debug Mode: ✔ WP Cron: ✔ Language: en_US External object cache: – ### Server Environment ### Server Info: Apache/2.4.38 (Debian) PHP Version: 7.4.13 PHP Post Max Size: 8 MB PHP Time Limit: 30 PHP Max Input Vars: 1000 cURL Version: 7.64.0 OpenSSL/1.1.1d SUHOSIN Installed: – MySQL Version: 5.5.5-10.5.8-MariaDB-1:10.5.8+maria~focal Max Upload Size: 2 MB Default Timezone is UTC: ✔ fsockopen/cURL: ✔ SoapClient: ❌ Your server does not have the SoapClient class enabled - some gateway plugins which use SOAP may not work as expected. DOMDocument: ✔ GZip: ✔ Multibyte String: ✔ Remote Post: ✔ Remote Get: ✔ ### Database ### WC Database Version: 5.6.0 WC Database Prefix: wp_ Total Database Size: 36.76MB Database Data Size: 16.88MB Database Index Size: 19.88MB wp_woocommerce_sessions: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_woocommerce_api_keys: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_woocommerce_attribute_taxonomies: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_woocommerce_downloadable_product_permissions: Data: 0.02MB + Index: 0.17MB + Engine InnoDB wp_woocommerce_order_items: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_woocommerce_order_itemmeta: Data: 0.13MB + Index: 0.19MB + Engine InnoDB wp_woocommerce_tax_rates: Data: 0.02MB + Index: 0.08MB + Engine InnoDB wp_woocommerce_tax_rate_locations: Data: 0.02MB + Index: 0.05MB + Engine InnoDB wp_woocommerce_shipping_zones: Data: 0.02MB + Index: 0.00MB + Engine InnoDB wp_woocommerce_shipping_zone_locations: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_woocommerce_shipping_zone_methods: Data: 0.02MB + Index: 0.00MB + Engine InnoDB wp_woocommerce_payment_tokens: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_woocommerce_payment_tokenmeta: Data: 0.02MB + Index: 0.05MB + Engine InnoDB wp_woocommerce_log: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_actionscheduler_actions: Data: 3.16MB + Index: 1.09MB + Engine InnoDB wp_actionscheduler_claims: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_actionscheduler_groups: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_actionscheduler_logs: Data: 1.19MB + Index: 0.63MB + Engine InnoDB wp_automatewoo_abandoned_carts: Data: 0.02MB + Index: 0.08MB + Engine InnoDB wp_automatewoo_customers: Data: 0.02MB + Index: 0.09MB + Engine InnoDB wp_automatewoo_customer_meta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_automatewoo_events: Data: 0.02MB + Index: 0.05MB + Engine InnoDB wp_automatewoo_guests: Data: 0.02MB + Index: 0.06MB + Engine InnoDB wp_automatewoo_guest_meta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_automatewoo_logs: Data: 0.05MB + Index: 0.05MB + Engine InnoDB wp_automatewoo_log_meta: Data: 0.14MB + Index: 0.14MB + Engine InnoDB wp_automatewoo_queue: Data: 0.02MB + Index: 0.05MB + Engine InnoDB wp_automatewoo_queue_meta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_automatewoo_referrals: Data: 0.02MB + Index: 0.08MB + Engine InnoDB wp_automatewoo_referral_advocate_keys: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_automatewoo_referral_invites: Data: 0.02MB + Index: 0.05MB + Engine InnoDB wp_commentmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_comments: Data: 0.14MB + Index: 0.09MB + Engine InnoDB wp_followup_coupons: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_followup_coupon_logs: Data: 0.02MB + Index: 0.05MB + Engine InnoDB wp_followup_customers: Data: 0.02MB + Index: 0.06MB + Engine InnoDB wp_followup_customer_carts: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_followup_customer_notes: Data: 0.02MB + Index: 0.11MB + Engine InnoDB wp_followup_customer_orders: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_followup_email_excludes: Data: 0.02MB + Index: 0.05MB + Engine InnoDB wp_followup_email_logs: Data: 0.02MB + Index: 0.05MB + Engine InnoDB wp_followup_email_orders: Data: 0.08MB + Index: 0.09MB + Engine InnoDB wp_followup_email_tracking: Data: 0.02MB + Index: 0.08MB + Engine InnoDB wp_followup_followup_history: Data: 0.09MB + Index: 0.09MB + Engine InnoDB wp_followup_order_categories: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_followup_order_items: Data: 0.02MB + Index: 0.05MB + Engine InnoDB wp_followup_subscribers: Data: 0.02MB + Index: 0.11MB + Engine InnoDB wp_followup_subscribers_to_lists: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_followup_subscriber_lists: Data: 0.02MB + Index: 0.11MB + Engine InnoDB wp_links: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_options: Data: 3.03MB + Index: 0.08MB + Engine InnoDB wp_postmeta: Data: 4.48MB + Index: 11.42MB + Engine InnoDB wp_posts: Data: 1.23MB + Index: 1.20MB + Engine InnoDB wp_sf4wp_events: Data: 0.02MB + Index: 0.08MB + Engine InnoDB wp_sf4wp_event_logs: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_sf4wp_form_entries: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_termmeta: Data: 0.05MB + Index: 0.03MB + Engine InnoDB wp_terms: Data: 0.06MB + Index: 0.03MB + Engine InnoDB wp_term_relationships: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_term_taxonomy: Data: 0.06MB + Index: 0.08MB + Engine InnoDB wp_usermeta: Data: 0.05MB + Index: 0.03MB + Engine InnoDB wp_users: Data: 0.02MB + Index: 0.05MB + Engine InnoDB wp_wc_admin_notes: Data: 0.05MB + Index: 0.00MB + Engine InnoDB wp_wc_admin_note_actions: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_wc_bookings_availability: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_wc_bookings_availabilitymeta: Data: 0.02MB + Index: 0.05MB + Engine InnoDB wp_wc_booking_relationships: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_wc_category_lookup: Data: 0.02MB + Index: 0.00MB + Engine InnoDB wp_wc_customer_lookup: Data: 0.02MB + Index: 0.05MB + Engine InnoDB wp_wc_download_log: Data: 0.02MB + Index: 0.05MB + Engine InnoDB wp_wc_order_coupon_lookup: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_wc_order_product_lookup: Data: 0.05MB + Index: 0.11MB + Engine InnoDB wp_wc_order_stats: Data: 0.02MB + Index: 0.20MB + Engine InnoDB wp_wc_order_tax_lookup: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_wc_points_rewards_user_points: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_wc_points_rewards_user_points_log: Data: 0.02MB + Index: 0.05MB + Engine InnoDB wp_wc_product_meta_lookup: Data: 1.52MB + Index: 1.59MB + Engine InnoDB wp_wc_reserved_stock: Data: 0.02MB + Index: 0.00MB + Engine InnoDB wp_wc_tax_rate_classes: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_wc_webhooks: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_wrd_discounts: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_wrd_sent_coupons: Data: 0.02MB + Index: 0.05MB + Engine InnoDB wp_yith_wcwl: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_yith_wcwl_lists: Data: 0.02MB + Index: 0.03MB + Engine InnoDB ### Post Type Counts ### attachment: 113 aw_workflow: 21 bookable_person: 7 bookable_resource: 2 follow_up_email: 7 nav_menu_item: 9 page: 13 post: 4 product: 50 product_variation: 438 revision: 30 shop_coupon: 2 shop_order: 109 shop_subscription: 4 wc_booking: 41 wc_membership_plan: 1 wc_user_membership: 1 wcpf_item: 4 wcpf_project: 1 ### Security ### Secure connection (HTTPS): ✔ Hide errors from visitors: ❌Error messages should not be shown to visitors. ### Active Plugins (7) ### AutomateWoo: by WooCommerce – 5.4.1 Facebook for WooCommerce: by Facebook – 2.7.0-dev Kiwimattic Block Patterns: by YOUR NAME HERE – 0.1.0 Pinterest for WooCommerce: by WooCommerce – 0.9.0 WooCommerce Blocks: by Automattic – 5.5.1 WooCommerce Stripe Gateway: by WooCommerce – 5.2.0 WooCommerce: by Automattic – 5.7.0-dev ### Inactive Plugins (30) ### Action Scheduler Queue Runner Logger: by Automattic – 0.1 Agile CRM WooCommerce: by Agile CRM Team – 1.0 Akismet Anti-Spam: by Automattic – 4.1.9 AutomateWoo - AgileCRM Add-on: by WooCommerce – 1.4.5 AutomateWoo - Birthdays Add-on: by WooCommerce – 1.3.2 AutomateWoo - Refer A Friend Add-on: by WooCommerce – 2.6.1 AutomateWoo - Subscriptions Add-on: by WooCommerce – 1.2.3 Follow-Up Emails: by WooCommerce – 4.9.13 Hello Dolly: by Matt Mullenweg – 1.7.2 Product Filters for WooCommerce: by WooCommerce – 1.2.5 Query Monitor: by John Blackbourn – 3.7.1 Salesforce for WP & WooCommerce: by Salesforce – 1.0.0 WooCommerce Admin: by WooCommerce – 2.5.0-dev WooCommerce Bookings: by WooCommerce – 1.15.39 WooCommerce Branding: by WooCommerce – 1.0.29 WooCommerce Brands: by WooCommerce – 1.6.24 WooCommerce Coupon Campaigns & Tracking: by WooCommerce – 1.1.17 WooCommerce Drip: by WooCommerce – 1.2.25 WooCommerce Give Products: by WooCommerce – 1.1.13 WooCommerce Google Analytics Integration: by WooCommerce – 1.5.1 WooCommerce Memberships: by SkyVerge – 1.21.2 WooCommerce Points and Rewards: by WooCommerce – 1.6.43 WooCommerce Product Enquiry Form: by WooCommerce – 1.2.17 WooCommerce Product Finder: by WooCommerce – 1.2.17 WooCommerce Review for Discount: by WooCommerce – 1.6.21 WooCommerce Sales Report Email: by WooCommerce – 1.1.18 WooCommerce Smooth Generator: by Automattic – 1.0.1 WooCommerce Subscriptions: by WooCommerce – 3.0.11 WP Crontrol: by John Blackbourn & crontributors – 1.10.0 YITH WooCommerce Wishlist: by YITH – 3.0.22 ### Must Use Plugins (6) ### facebook-hacks.php: by – fork of Mailhog for WordPress: by Tareq Hasan – 1.0 init-log.php: by – pinterest-features.php: by – wp-salesforce-constants.php: by – WP.com Site Helper: by – ### Settings ### API Enabled: – Force SSL: – Currency: NZD ($) Currency Position: left Thousand Separator: Decimal Separator: . Number of Decimals: 0 Taxonomies: Product Types: booking (booking) external (external) grouped (grouped) simple (simple) subscription (subscription) variable (variable) variable subscription (variable-subscription) Taxonomies: Product Visibility: exclude-from-catalog (exclude-from-catalog) exclude-from-search (exclude-from-search) featured (featured) outofstock (outofstock) rated-1 (rated-1) rated-2 (rated-2) rated-3 (rated-3) rated-4 (rated-4) rated-5 (rated-5) Connected to WooCommerce.com: – ### WC Pages ### Shop base: #6 - /shop/ Cart: #7 - /cart/ Checkout: #8 - /checkout/ My account: #9 - /my-account/ Terms and conditions: ❌ Page not set ### Theme ### Name: Storefront Version: 3.5.1 (update to version 3.7.0 is available) Author URL: https://woocommerce.com/ Child Theme: ❌ – If you are modifying WooCommerce on a parent theme that you did not build personally we recommend using a child theme. See: How to create a child theme WooCommerce Support: ✔ ### Templates ### Overrides: – ### Action Scheduler ### Complete: 3,023 Oldest: 2021-07-06 05:20:48 +0000 Newest: 2021-08-05 21:37:05 +0000 Failed: 324 Oldest: 2021-03-31 00:22:30 +0000 Newest: 2021-05-16 23:31:01 +0000 Pending: 4 Oldest: 2021-08-05 21:43:59 +0000 Newest: 2021-08-06 02:09:53 +0000 ### Status report information ### Generated at: 2021-08-05 21:38:30 +00:00 ```

JavaScript errors

``` index.js:22 Uncaught TypeError: Object(...) is not a function at index.js:22 at renderWithHooks (react-dom.js?ver=16.13.1:14938) at mountIndeterminateComponent (react-dom.js?ver=16.13.1:17617) at beginWork (react-dom.js?ver=16.13.1:18731) at HTMLUnknownElement.callCallback (react-dom.js?ver=16.13.1:182) at Object.invokeGuardedCallbackDev (react-dom.js?ver=16.13.1:231) at invokeGuardedCallback (react-dom.js?ver=16.13.1:286) at beginWork$1 (react-dom.js?ver=16.13.1:23338) at performUnitOfWork (react-dom.js?ver=16.13.1:22289) at workLoopSync (react-dom.js?ver=16.13.1:22265) (anonymous) @ index.js:22 renderWithHooks @ react-dom.js?ver=16.13.1:14938 mountIndeterminateComponent @ react-dom.js?ver=16.13.1:17617 beginWork @ react-dom.js?ver=16.13.1:18731 callCallback @ react-dom.js?ver=16.13.1:182 invokeGuardedCallbackDev @ react-dom.js?ver=16.13.1:231 invokeGuardedCallback @ react-dom.js?ver=16.13.1:286 beginWork$1 @ react-dom.js?ver=16.13.1:23338 performUnitOfWork @ react-dom.js?ver=16.13.1:22289 workLoopSync @ react-dom.js?ver=16.13.1:22265 performSyncWorkOnRoot @ react-dom.js?ver=16.13.1:21891 (anonymous) @ react-dom.js?ver=16.13.1:11224 unstable_runWithPriority @ react.js?ver=16.13.1:2685 runWithPriority$1 @ react-dom.js?ver=16.13.1:11174 flushSyncCallbackQueueImpl @ react-dom.js?ver=16.13.1:11219 flushSyncCallbackQueue @ react-dom.js?ver=16.13.1:11207 discreteUpdates$1 @ react-dom.js?ver=16.13.1:22028 discreteUpdates @ react-dom.js?ver=16.13.1:803 dispatchDiscreteEvent @ react-dom.js?ver=16.13.1:4291 react_devtools_backend.js:2574 The above error occurred in the component: in WithFocusOutside(ModalFrame) (created by Modal) in Modal (created by WithInstanceId(Modal)) in WithInstanceId(Modal) (created by SetupAccount) in div (created by Context.Consumer) in CardUI (created by Card) in Card (created by SetupAccount) in div (created by SetupAccount) in div (created by SetupAccount) in div (created by SetupAccount) in SetupAccount (created by SettingsApp) in div (created by SettingsApp) in div (created by SettingsApp) in div (created by SettingsApp) in SettingsApp (created by ee) in Suspense (created by ee) in ee (created by bt) in div (created by bt) in div (created by ht) in ht (created by bt) in div (created by bt) in slot_fill_provider_SlotFillProvider (created by SlotFillProvider) in SlotFillProvider (created by bt) in bt in Unknown (created by WithSelect(bt)) in WithSelect(bt) (created by WithPluginsHydration(WithSelect(bt))) in WithPluginsHydration(WithSelect(bt)) (created by Context.Consumer) in t in t in t in Unknown (created by WithOptionsHydration(Component)) in WithOptionsHydration(Component) (created by WithSettingsHydration(WithOptionsHydration(Component))) in WithSettingsHydration(WithOptionsHydration(Component)) (created by WithSettingsHydration(WithSettingsHydration(WithOptionsHydration(Component)))) in WithSettingsHydration(WithSettingsHydration(WithOptionsHydration(Component))) (created by WithCurrentUserHydration(WithSettingsHydration(WithSettingsHydration(WithOptionsHydration(Component))))) in WithCurrentUserHydration(WithSettingsHydration(WithSettingsHydration(WithOptionsHydration(Component)))) Consider adding an error boundary to your tree to customize error handling behavior. Visit https://fb.me/react-error-boundaries to learn more about error boundaries. overrideMethod @ react_devtools_backend.js:2574 logCapturedError @ react-dom.js?ver=16.13.1:19662 logError @ react-dom.js?ver=16.13.1:19699 update.callback @ react-dom.js?ver=16.13.1:20843 callCallback @ react-dom.js?ver=16.13.1:12625 commitUpdateQueue @ react-dom.js?ver=16.13.1:12646 commitLifeCycles @ react-dom.js?ver=16.13.1:20018 commitLayoutEffects @ react-dom.js?ver=16.13.1:22938 callCallback @ react-dom.js?ver=16.13.1:182 invokeGuardedCallbackDev @ react-dom.js?ver=16.13.1:231 invokeGuardedCallback @ react-dom.js?ver=16.13.1:286 commitRootImpl @ react-dom.js?ver=16.13.1:22676 unstable_runWithPriority @ react.js?ver=16.13.1:2685 runWithPriority$1 @ react-dom.js?ver=16.13.1:11174 commitRoot @ react-dom.js?ver=16.13.1:22516 finishSyncRender @ react-dom.js?ver=16.13.1:21942 performSyncWorkOnRoot @ react-dom.js?ver=16.13.1:21928 (anonymous) @ react-dom.js?ver=16.13.1:11224 unstable_runWithPriority @ react.js?ver=16.13.1:2685 runWithPriority$1 @ react-dom.js?ver=16.13.1:11174 flushSyncCallbackQueueImpl @ react-dom.js?ver=16.13.1:11219 flushSyncCallbackQueue @ react-dom.js?ver=16.13.1:11207 discreteUpdates$1 @ react-dom.js?ver=16.13.1:22028 discreteUpdates @ react-dom.js?ver=16.13.1:803 dispatchDiscreteEvent @ react-dom.js?ver=16.13.1:4291 react-dom.js?ver=16.13.1:11237 Uncaught TypeError: Object(...) is not a function at index.js:22 at renderWithHooks (react-dom.js?ver=16.13.1:14938) at mountIndeterminateComponent (react-dom.js?ver=16.13.1:17617) at beginWork (react-dom.js?ver=16.13.1:18731) at HTMLUnknownElement.callCallback (react-dom.js?ver=16.13.1:182) at Object.invokeGuardedCallbackDev (react-dom.js?ver=16.13.1:231) at invokeGuardedCallback (react-dom.js?ver=16.13.1:286) at beginWork$1 (react-dom.js?ver=16.13.1:23338) at performUnitOfWork (react-dom.js?ver=16.13.1:22289) at workLoopSync (react-dom.js?ver=16.13.1:22265) ```

[haszari]

Marking this as high and adding to 1.0. If disconnect doesn't work in WordPress 5.6, then we need to fix it (or change the requirements).

In general, all functionality and UI should work consistently in all supported versions of WordPress & WooCommerce.

I'm not sure how much has been tested so far, I've done most of my testing with latest WP and Woo. So may need to dedicate some testing time to older versions.

[msaggiorato]

After research, this seems to be a problem in the Modal component of WP 5.6. I'm going to go ahead and test if any of the minor updates of WP 5.6 branch actually fixes the problem, therefore we can bump the version number there.

I'm certain the issue is with the Modal component, because if we unwrap the Modal content of the disconnect code, it renders.

If we try to even render an empty modal, it fails.

Will keep updating this.

[haszari]

Thanks @msaggiorato! Perhaps we can bundle the Modal component rather than rely on whatever's in the current WP version.

Dependency Extraction Webpack Plugin allows us to control which packages are pulled in from WordPress/Woo on the site at run time, vs compiled in (bundled) at plugin build time.