js-error if wp_enqueue_media() called in the footer

Hi @themerex,

First, thanks for your message, because I am looking for a solution for this issue. But I don’t understand exactly what you mean.

If you call wp_enqueue_media() from the action ‘admin_enqueue_scripts’, then even with the active plugin “AI Engine” there are no errors and the popup works fine.

Is this the fix? Can you try to re-explain how to fix it? The fix is on my side?

Hi, Jordy.

Your code is somehow preventing wp.media.view.settings from being initialized

Steps to reproduce:

1. Activate the default WP theme twentytwentyone and a plugin “AI Engine” https://prnt.sc/f9FHlyqWjZej
2. Add a hook for action ‘admin_footer’ in functions.php (imagine that this hook checks the condition – whether the image selection field was used on the page and only in this case calls wp_enqueue_media(). But in our example, we call it always ):
   add_action( 'admin_footer', function() {
wp_enqueue_media();
} );
3. Refresh any page in the admin panel and open the browser console – you will see an error there. Because the wp.media.view.settings object is empty https://prnt.sc/wUVlo-vwYilp
4. If you deactivate your plugin – there is no error and the object is normally initialized: https://prnt.sc/tJwTz1rxCyK7

There will be no error if loading wp_enqueue_media() on the “admin_enqueue_scripts” event. But in this case, we can’t check if the image selection field from the Media Library is used on the page, because this hook is generated even before the page is rendered. I will have to include scripts and styles always, even where they are not needed (for example, on the plugins page, which is in the screenshots above).

Somehow, I can’t reproduce it, for me, it always works…

Also, I don’t need wp_enqueue_media, I can use wp.media.view.settings, without enqueuing it.

I am not sure how to help ??

In my plugin, you can check admin_enqueue_scripts, everything is done correctly I believe. Maybe you could try to add wp_enqueue_media in there, I am not sure, maybe it would help.

Just repeat steps 1-4 from my post above on a new WordPress installation and you will get an error in the console. Deactivate your plugin (there are no other plugins) and the error will disappear. So the reason is in your code, right?

• This reply was modified 1 year, 6 months ago by themerex.

I just checked with the latest version of the plugin
https://prnt.sc/9ukZyDGOLkAw

It’s a bit more complicated than this @themerex ?? It’s important to understand exactly the issue to know where it comes from.

I am loading the scripts from the current installed version of WordPress directly. I don’t bundle/compile external scripts, to avoid running different version of the ones that are included in WordPress.

Important question:
Are you bundling your scripts with webpack? Are you importing scripts like @wordpress/components and so on?

Please note that steps 1-4 do not contain any of my or any other third-party code! Just the default WordPress theme “TwentyTwentyOne” and your plugin. And just added a hook to functions.php for “admin_footer” (the only code I added to the default theme) to show that when you call wp_enqueue_media() at this point, your code throws an error.

Perhaps you are accessing (or even changing) wp.media.view.settings before WordPress initializes this object (because of its late inclusion) and thus violates the standard initialization of this object?

• This reply was modified 1 year, 6 months ago by themerex.

I am not accessing, adding it nor using it. I am loading those WordPress scripts via admin_enqueue_scripts: ‘wp-element’, ‘wp-components’, ‘wp-edit-post’, ‘wp-plugins’ and ‘wp-i18n’. It’s nothing strange, so I do everything accordingly to WordPress documentation and best practices. You can check ??

However, I am not sure this is the recommended way to do this:

If wp_enqueue_media() is not called from the action ‘admin_enqueue_scripts’ but directly from the code that adds the image upload field or from the action ‘wp_footer’

Scripts shouldn’t be enqueued via the wp_footer, it’s too late. I understand you want to load this conditionally, but there are many other ways.

Since Rank Math is doing that too, and that they wouldn’t do anything to fix it or look into it, I will add wp_enqueue_media() in my admin_enqueue_scripts. That seems to fix the issue.