Select Media Modal (from Jetpack block) is not showing up in Widget page when WooPayment plugin is activated

[joaopamaral]

Impacted plugin

Jetpack

Quick summary

When the WooPayment plugin is activated, the Select Images > Media Library from the Tiled Galery (Jetpack) is not showing the Modal and the console shows the following error:

react-dom.min.js?ver=18:1 Uncaught TypeError: _.contains is not a function
    at r.extend.get (media-models.min.js?ver=6.6.2:2:10532)
    at n._requery (media-models.min.js?ver=6.6.2:2:5059)
    at n._changeQuery (media-models.min.js?ver=6.6.2:2:2274)
    at p (backbone.min.js?ver=1.5.0:2:3818)
    at f (backbone.min.js?ver=1.5.0:2:3497)
    at a (backbone.min.js?ver=1.5.0:2:692)
    at e.trigger (backbone.min.js?ver=1.5.0:2:3380)
    at h.Model.set (backbone.min.js?ver=1.5.0:2:5789)
    at n.initialize (media-models.min.js?ver=6.6.2:2:1926)
    at h.Collection (backbone.min.js?ver=1.5.0:2:8619)

react-dom.min.js?ver=18:1 Uncaught TypeError: Cannot read properties of undefined (reading 'on')
    at d.initializeListeners (index.js:238:14)
    at d.openModal (index.js:457:8)
    at onClick (editor-experimental.js?minify=false&ver=105122b4097ae517260a:178:9007)
    at n.<computed> (SK3NAZA3.js:47:11)
    at Object.Ga (react-dom.min.js?ver=18:1:105337)
    at B (react-dom.min.js?ver=18:1:10495)
    at W (react-dom.min.js?ver=18:1:10550)
    at qe (react-dom.min.js?ver=18:1:23291)
    at Ke (react-dom.min.js?ver=18:1:23705)
    at react-dom.min.js?ver=18:1:29056

react-dom.min.js?ver=18:1 Uncaught TypeError: this.activateMode is not a function
    at media-views.min.js?ver=6.6.2:2:59467
    at bt (lodash.js:530:11)
    at Function.ba (lodash.js:9409:52)
    at n._createModes (media-views.min.js?ver=6.6.2:2:59427)
    at n.initialize (media-views.min.js?ver=6.6.2:2:58836)
    at n.initialize (media-views.min.js?ver=6.6.2:2:79654)
    at n.initialize (media-views.min.js?ver=6.6.2:2:73270)
    at h.View (backbone.min.js?ver=1.5.0:2:14872)
    at n.constructor (wp-backbone.min.js?ver=6.6.2:2:2602)
    at n.constructor (media-views.min.js?ver=6.6.2:2:106544)

• WooPayments v8.2.2
• Jetpack v13.8.1

Steps to reproduce

1. Create a store blog
2. Add the jetpack and WooPayment plugins
3. In Appearance > Widgets add a Tiled Gallery.
4. Try to select the Media Library.
5. The Select Media Modal will not be shown.

A clear and concise description of what you expected to happen.

It's expected to open the modal with all the images available in the Media Library.

What actually happened

The modal is not shown.

Impact

One

Available workarounds?

Yes, easy to implement

If the above answer is "Yes...", outline the workaround.

• Disable the WooPayment plugin
• Update the widget by selecting the images
• Re-enable the WooPayment plugin

Platform (Simple and/or Atomic)

Atomic

Logs or notes

No response

[anomiex]

I was not able to reproduce this following the instructions provided.

1. Created a fresh JN site, with Jetpack, WooCommerce, and WooPayments.
2. Clicked through WooCommerce's setup until I got back to wp-admin.
   • Selected "Setting up a store for a client".
3. Downgraded Jetpack from 13.9-a.7 to 13.8.1. Verified WooPayments is 8.2.2.
4. Switched themes from Twenty Twenty-Four to Storefront, since the former doesn't have Appearance > Widgets.
5. Appearance > Widgets, added a Tiled Gallery widget. Media Library opened fine.
6. Went into WooPayments, clicked "Enable Sandbox Mode", in case it not being set up made a difference.
7. Appearance > Widgets, added a Tiled Gallery widget. Media Library still opened fine.

Tried adding WooCommerce and WooPayments on my WoA dev site, that worked fine too.

[joaopamaral]

Thanks for trying to replicate the issue @anomiex! I've found this a similar issue reported in https://stackoverflow.com/questions/63672622/typeerror-this-activatemode-is-not-a-function-gutenberg-wordpress saying that it could be a conflict between the underscore and lodash libraries. Did you try to edit using Gutenberg editor? Gutenberg was also activated when I saw this issue.

[anomiex]

Installed the Gutenberg plugin, still couldn't reproduce.

[jeherve]

@joaopamaral Did you go through the same steps as @anomiex detailed above on your test site, or can you think of an additional / different step we could take to reproduce the problem? Do you happen to have other plugins installed on the site, in addition to the ones already mentioned?

[joaopamaral]

Hi @jeherve! I didn't have time to test last week during my rotation, but other plugins were installed on the site (that was facing this issue). This is the plugin list:

• Akismet Anti Spam
• CoBlocks
• Crowdsignal Forms
• Gutenberg
• Layout Grid
• Page Optimizer
• Woo Out Of Stock Products
• WooCommerce.com Update Manager
• WooPayments
• WooCommerce PayPal Payments
• WooCommerce Shipping & Tax
• WooCommerce
  So, basically, the issue was happening with all these plugins turned on, and when we turned off WooPayments, it was working.