search

Automattic / jetpack

Security, performance, marketing, and design tools — Jetpack is made by WordPress experts to make WP sites safer and faster, and help you grow your traffic.
https://jetpack.com/
Other
1.59k stars 798 forks source link

"Select Media" modal (from Jetpack block) is not showing up in Widget page when WooPayments is activated #39514

Open joaopamaral opened 1 month ago

joaopamaral commented 1 month ago

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)

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.
image

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.

Platform (Simple and/or Atomic)

Atomic

Logs or notes

No response

anomiex commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

Installed the Gutenberg plugin, still couldn't reproduce.

jeherve commented 1 month ago

@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 commented 1 month ago

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:

Robertght commented 1 month ago

📌 REPRODUCTION RESULTS

📌 FINDINGS/SCREENSHOTS/VIDEO

Image

📌 ACTIONS