WordPress Featured Images Not Working? Console Error: _.contains is not a function — A Case Study in Debugging a Bizarre Bug Caused by a Browser Extension Conflict

problem

One day, as usual, I edited articles in the WordPress background, ready to set up a featured picture for the article. Click on ‘Set Featured Pictures’ button, no response. The media library pop-up window does not appear, the page seems to be frozen.

Open the browser developer tool (F12), and a red error message appears on the console (as shown in Figure 1):

Uncaught TypeError: _.contains is not a function
    at r.1288.r.extend.get (media-models.min.js?ver=7.0:2:10536)
    at Object._requery (media-models.min.js?ver=7.0:2:5065)
    at Object._changeQuery (media-models.min.js?ver=7.0:2:2280)
    at p (backbone.min.js?ver=1.6.1:2:3818)
    ...

Each time you click ‘Set Featured Picture’, an error will be added. This means the core script of the media library in the WordPress background (media-models.min.js) When executing, no one named _.contains JavaScript function.

Preliminary guess: browser cache?

Press F5 to refresh, the problem remains the same. Use Ctrl+F5 to force a refresh (bypass the cache), and it works! The featured picture can be opened normally (as shown in Figure 2). However,The next time I create a new article, the problem is back, and must be forced to refresh again.

It’s weird: Forced refresh has been re-downloaded with the correct script, why does the browser ‘can’t remember’?

I tried chrome seamless mode, the first click is completely normal, and the console does not report any errors (as shown in Figure 3). This shows that the problem is definitely related to some persistent data or extensions in normal mode.

Exclude service workers

I know that modern browsers have service workers (a standalone caching mechanism), and many PWA websites will use it to intercept network requests. Could it be that my WordPress site registered a service worker, cached the old js file?

Open chrome://serviceworker-internals/, carefully view all registered service workers. There are a bunch of them in the list, but they are all browser extensions (chrome-extension://) or third-party websites (Google, Bing, Notion, etc.), and there is no my WordPress domain name (as shown in Figure 4).The possibility of excluding service worker.

Move to browser extension (plug-in)

Integrated mode disables all extensions by default, while normal mode loads all extensions. The only difference between the two is extension. Therefore,The problem is almost certainly on one or more browser extensions.

I have many extensions installed: 6 crypto wallets (MetaMask, Phantom, TonKeeper, Alby, OneKey, Unisat Wallet), as well as Stylus, WPS browser assistant, React developer tools, etc. Now start checking one by one.

First batch test

I firstDisable all extensions, and then go back to the WordPress background and click ‘Set Featured Pictures’——Normal! Confirmation is an expansion conflict.

Wallet Extension Separate Test

Next, I tryEnable only all 6 crypto wallet extensions, disable all other extensions. Result:Problem repeating(Click no response, report an error).

Could that be a wallet expansion pot? I tryEnable only MetaMask, all other closed. Test:Normal.
Enable only Phantom: Normal.
Enable only TonKeeper: Normal.
…everyone is no problem if it is enabled separately.

The problem seems to only appear inMultiple wallets are enabled at the same timetime.

Divided method positioning specific combination

I have 6 wallets, all have errors when enabled. I trydisable one of them, keep the other 5.

• Disable Unisat Wallet → 5 other enabled → Normal!
• Disable MetaMask → 5 other enabled → Still an error? Wait a minute, no, let me re-test rigorously.

After repeated cross-validation, the final conclusion is finally obtained:

When Unisat Wallet and MetaMask are enabled at the same time, an error must be triggered.
The error is also triggered when Unisat Wallet and Phantom are enabled at the same time.
And Unisat is enabled alone, or it is enabled at the same time as other wallets (such as TonKeeper, Alby, OneKey), and there is no problem.

This is interesting:The problem is not caused by a single extension, but the interaction conflict between Unisat Wallet and MetaMask or Phantom.

Single Extension Verification

To confirm, I did the last test:Enable Unisat Wallet only, disable all other extensions (including MetaMask, Phantom, etc.). Result:Normal functioning. It means that Unisat itself is not destroying the WordPress background, only conflicts will arise when it exists at the same time as some other wallets.

The root cause of the conflict

These crypto wallet extensions will inject JavaScript global objects into the page (such as window.ethereum), and they may each load their own versions lodash Or underscore library, and cover the global _ variables.

WordPress media-models.min.js Depends on the old version of underscore.js provided _.contains method. Once _ Replaced by an extension (or its dependent library) with a no contains The object of the method (for example, the method in the new version of Lodash has been renamed _.includes) will be thrown _.contains is not a function error.

When Unisat is running at the same time as MetaMask (or Phantom), they are _ The contention leads to version incompatibility and ultimately exposes the vulnerable dependencies of WordPress code.

Solution

The root cause is found, and the solution is clear:

Temporary plan (recommended)

When using WordPress to write articles in the background,Temporarily disable Unisat Wallet(As shown in Figure 5) (or disable MetaMask/Phantom, choose according to personal needs). You can switch groups with one click through Chrome’s Extension Management Panel, or install an extension manager (such as SimpleExtManager).

The direct reason has been found, it should be related to the installation of the wallet extension phantom I installed some time ago. It is the problem caused by Unisat Wallet + Phantom . Reference:V2EX Registration Raiders: From purchasing V2EX tokens to solving the Phantom plugin stuck to go ashore

Long-term plan

1. Feedback to Extended Developers: Submit the issue of Issue on GitHub or the official support channel, describe the conflicting phenomenon of WordPress background, and attach the error stack and replication steps. Hope they will fix the global _ pollution.
2. Using Chrome Multi-User: Create a new Chrome user (profile) dedicated to website management that does not install any crypto wallet extensions. Switch to this user when writing an article, completely isolated.
3. Modify WordPress code (not recommended): can be in the theme functions.php Force reload underscore.js, but this is only a cure for the symptoms but may affect performance.

Summary and Reflection

This investigation made me realize:

• Browser extension is the invisible culprit of website background failure. When encountering the problem of ‘no trace mode normal, normal mode abnormal’, you should first suspect the expansion conflict.
• Don’t be fooled by superficial phenomena: I thought it was a cache at first, but later I thought it was a service worker, and finally locked to the extension. Each step must be verified with control experiments.
• Conflicts may not be ‘one-to-one’ when multiple extensions coexist, but ‘one-to-many’ or ‘many-to-many’. It is necessary to patiently use the dichotomy method to gradually narrow the scope of the pair test method.
• The front-end code of WordPress depends on the old JS library, it is easy to conflict with modern browser extensions. It is hoped that WordPress can upgrade its media library scripts in the future to reduce the dependence on external global variables.

I hope this article can help WordPress users who have the same problem. If you also have a similar ‘featured picture click no response’ fault, try disabling all extensions first to see if it is an extension conflict. If yes, it can be gradually positioned according to the method of this paper.

Attachment: the extended version I use (for reference)

• Unisat wallet: the latest version
• MetaMask: the latest version
• Phantom: The latest version
• chrome: stable version (version number omitted)