WordPress.org

Make WordPress Core

#45271 closed defect (bug) (fixed)

Can't enqueue WordPress 5.0 builtin reactjs

Reported by: CantoThemes Owned by: SergeyBiryukov
Milestone: 5.0 Priority: normal
Severity: normal Version: 5.0
Component: Script Loader Keywords: has-patch commit fixed-5.0
Focuses: javascript Cc:
PR Number:

Description

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

Attachments (2)

45271.patch (538 bytes) - added by ocean90 12 months ago.
45271.2.patch (2.4 KB) - added by ocean90 12 months ago.

Download all attachments as: .zip

Change History (19)

#1 @CantoThemes
12 months ago

  • Version set to 5.0

#2 @pento
12 months ago

  • Keywords reporter-feedback added
  • Milestone changed from Awaiting Review to 5.0

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.

#3 @CantoThemes
12 months ago

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

#4 @pento
12 months ago

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.

#5 @CantoThemes
12 months ago

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&amp;load%5B%5D=hoverIntent,common,admin-bar,react,react-dom,svg-painter,heartbeat,wp-auth-check&amp;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
12 months ago

#6 @ocean90
12 months ago

  • Component changed from General to Script Loader
  • Keywords has-patch added

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

#7 @CantoThemes
12 months ago

@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

#8 @ocean90
12 months ago

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().

Last edited 12 months ago by ocean90 (previous) (diff)

@ocean90
12 months ago

#9 @CantoThemes
12 months ago

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 );

#10 @CantoThemes
12 months ago

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

#12 @nerrad
12 months ago

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

Last edited 12 months ago by nerrad (previous) (diff)

#13 @CantoThemes
12 months ago

@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' );
    } );
} );

#14 @pento
12 months ago

  • Keywords commit added; reporter-feedback removed

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

#15 @ocean90
12 months ago

In 43877:

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

Props CantoThemes, ocean90.
See #45271.

#16 @SergeyBiryukov
12 months ago

  • Keywords fixed-5.0 added

#17 @SergeyBiryukov
10 months ago

  • Owner set to SergeyBiryukov
  • Resolution set to fixed
  • Status changed from new to closed

In 44237:

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

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

Note: See TracTickets for help on using tickets.