Can't enqueue WordPress 5.0 builtin reactjs

[CantoThemes]

Hello,

I just tried to compatible my plugin with WordPress 5.0. My plugin use react which is bundled with my plugin. But now wordpress comes with default react. So I tried to load react and react-dom with

<?php
function load_assets(){
    wp_enqueue_script( 'react' );
    wp_enqueue_script( 'react-dom' );
}

But is not loading react. Is it a bug? or WordPress 5.0 default react using is not recommended?

Thanks

[pento]

Thank you for the bug report, @CantoThemes!

Which action are you hooking load_assets into? I was able to enqueue react and react-dom by hooking into the init action.

It's worth noting that loading WordPress' react is possible, but may cause compatibility issues in the future: we'll be aiming to keep React fairly up to date, and as React does drop support for older APIs over time, you'll need to ensure your code is also up to date.

There are a couple of options here:

• if you need to work directly with React (for example, the code you're writing also operates entirely outside of WordPress), I'd recommend bundling your supported version of React with your plugin, loading the WordPress version if you support it, or your version if you need to.
• If this code is intended to run in WordPress, I'd recommend looking at using the ​WordPress Element, instead. Element is currently a thin abstraction layer around React, it exposes the APIs in React that we're confident will either be part of React for the foreseeable future, or that we can provide a compatibility layer for if needed.

[CantoThemes]

Hello @pento

I have loaded by hooking at returning hook from add_menu_page() like this

<?php
$hook = add_menu_page( $this->_page_title, $this->_menu_title, $this->_capability, $this->_menu_slug, $callback, $this->_icon_url, $this->_position );
add_action( "load-" . $hook, [$this, 'load_assets'] );

If I call wp-element is loading But react and react-dom is not loading. That's why there is error element.min.js?ver=5.0-beta2-43859:1 Uncaught TypeError: Cannot read property 'createContext' of undefined.

Create a admin page and try to load react and react-dom in the returning hook from add_menu_page().

Thanks

Thanks

[pento]

Thanks for the extra information, @CantoThemes.

Here's a sample that works for me:

<?php
add_action( 'admin_menu', function() {
        $hook = add_menu_page( 'Test', 'Test', 'read', 'my-test', function () {
                echo 'test';
        } );

        add_action( "load-$hook", function () {
                wp_enqueue_script( 'react' );
                wp_enqueue_script( 'react-dom' );
        } );
} );

I see you're running the 5.0 nightly build: could I get you to update your install? I've just rebuild the nightly, to ensure it's up to date.

[CantoThemes]

Hello,

Right now WordPress version is 5.0-beta2-43862 and I have tried your code is not loading react. I don't know why is not working. I have tried at another wordpress setup only with your code but not working. I tried to debug and I found this:
http://localhost/test/wp5/wp-admin/load-scripts.php?c=1&load%5B%5D=hoverIntent,common,admin-bar,react,react-dom,svg-painter,heartbeat,wp-auth-check&ver=5.0-beta2-43862

There is react in this load-scripts.php link. But is not loading inside of script. I put var_dump in load-scripts.php and there is no react registered here.

<?php
$wp_scripts = new WP_Scripts();
wp_default_scripts($wp_scripts);
var_dump($wp_scripts);

Please type React and hit enter on your browser console to make sure react is loaded.

Thanks

[ocean90]

@CantoThemes Can you check if 45271.patch​ is going to fix it for you?

[CantoThemes]

@ocean90 No is not working. After this patch load-scripts.php returning blank screen. After error reporting turning on I saw this error.

Fatal error: Uncaught Error: Call to undefined function get_site_option() in F:\wamp64\www\test\wp5\wp-includes\script-loader.php:2206 Stack trace: #0 F:\wamp64\www\test\wp5\wp-includes\script-loader.php(48): script_concat_settings() #1 F:\wamp64\www\test\wp5\wp-includes\script-loader.php(77): wp_register_tinymce_scripts(Object(WP_Scripts)) #2 F:\wamp64\www\test\wp5\wp-includes\script-loader.php(583): wp_default_packages_vendor(Object(WP_Scripts)) #3 F:\wamp64\www\test\wp5\wp-admin\load-scripts.php(36): wp_default_packages(Object(WP_Scripts)) #4 {main} thrown in F:\wamp64\www\test\wp5\wp-includes\script-loader.php on line 2206

[ocean90]

45271.2.patch​ removes wp_register_tinymce_scripts() from wp_default_packages_vendor() as it's already called by wp_default_packages(). Instead of calling wp_default_packages(), call only wp_default_packages_vendor() and wp_default_packages_scripts() in load-scripts.php as TinyMCE has it's own loader. Also now uses wp_scripts_get_suffix() in wp_register_tinymce_scripts().

[CantoThemes]

Yes this patch work but need to to fix this patch too.

Right now src/wp-admin/load-scripts.php patch is

<?php
wp_default_packages_vendor( $scripts );
wp_default_packages_scripts( $scripts );

But it should be

<?php
wp_default_packages_vendor( $wp_scripts );
wp_default_packages_scripts( $wp_scripts );

[CantoThemes]

@ocean90 and @pento is there any chance to get update soon.

[nerrad]

As another data point, I'm unable to reproduce this issue with WP5.0b3.

Here's some screenshots:

​https://www.evernote.com/l/AAPpb5c3jIZH5JdzzHaytHGelWx9uAhTp10B/image.png

​https://www.evernote.com/l/AAMLZ20az9pHvoDfC3R1ohTIW799JtGWfrYB/image.png

[nerrad]

@CantoThemes what may be happening in your case is react and react-dom are being printed AFTER your script requiring them. What you need to do is register 'react' and 'react-dom' as dependencies on your script and then just enqueue your script in load_assets.

So something like:

wp_register_script( 'my-script-handle', $my_script_location, array( 'react', 'react-dom' ), $version, $in_footer );

Then in your load_assets callback just call wp_enqueue_script( 'my-script-handle' ).

This will ensure that your script is printed AFTER react and react-dom on the page.

[CantoThemes]

@nerrad Is not about my script. It's a bug where react is not loading as it should be. Yesterday I tried to play with wp-api-fetch and I failed. wp-api-fetch is loading but wp-polyfill-ecmascript is not loading and wp-api-fetch got break. So anything inside of wp_default_packages_vendor() is not loading as default.

If you want to reproduce this issue. Clean install a wordpress 5.0-beta3 and then create test.php in plugins folder use this code and active this plugin and go to Test page in admin now try React.

<?php
/**
 * Plugin Name: Test
 * Plugin URI: https://github.com/WordPress/gutenberg
 * Description: Printing since 1440. This is the development plugin for the new block editor in core.
 * Version: 1.0.0
 * Author: Test
 */

add_action( 'admin_menu', function() {
    $hook = add_menu_page( 'Test', 'Test', 'read', 'my-test', function () {
            echo 'test';
    } );

    add_action( "load-$hook", function () {
            wp_enqueue_script( 'react' );
            wp_enqueue_script( 'react-dom' );
    } );
} );

[pento]

45271.2.patch​ looks good, let's get it committed.

[ocean90]

In 43877:

Script Loader: Ensure default packages are registered when loaded via load-scripts.php.

Props CantoThemes, ocean90.
See #45271.

[SergeyBiryukov]

In 44237:

Script Loader: Ensure default packages are registered when loaded via load-scripts.php.

Props CantoThemes, ocean90.
Merges [43877] to trunk.
Fixes #45271.