3

I am getting a silent failure on the below code as I try to enqueue a static React.js script and hook its injecting div into the admin_footer. I see the page and my test echo plus the url of the script file. But the React application is not there, essentially the admin page is blank.

function prepAllAdminScripts() {
  echo "<p>test echo prepAllAdminScripts</p>";

  $url = PLUGIN_FOLDER_URL . 'shared/adminArea.bundle.js';
  echo "url: {$url}"; // shows working url to .js file

  wp_register_script(
    'reactAdminArea'
    , $url
    , null
    , null
    , true // false does not produce any change
  );

  wp_localize_script('reactAdminArea', 'serverParams', [
    '_wpnonce' => wp_create_nonce('wp_rest')
    , 'apiBaseUrlFromWp' => get_rest_url()
  ]);

// The non-wordpress way (below) works, loading the react.js script onto the admin page
//  echo '<div id="adminRoot"></div>';
//  echo "<script src='{$url}'></script>";

}


function createInjectionDiv() {
  echo '<div id="adminRoot"></div>';
}
add_action('admin_footer', 'createInjectionDiv');

add_action('admin_enqueue_scripts', 'prepAllAdminScripts');


function setupAdminSettingsPageParameters() {
  add_options_page(
    'Plugin Settings',
    'Plugin',
    'manage_options',
    'd_plugin',
    'prepAllAdminScripts'
  );
}
add_action('admin_menu', 'setupAdminSettingsPageParameters');

I suspect a novice error is being made as i'm learning the wordpress way, but can't seem to see it. Anyone see the issue?

Update

I have added the following to prepAllScripts()

wp_enqueue_script('reactAdminArea');

// error
index.js:10 Uncaught Error: only one instance of babel-polyfill is allowed
at Object.eval (index.js:10)
at eval (index.js:29)
at Object.<anonymous> (adminArea.bundle.js:1)
at F (adminArea.bundle.js:1)
at r (adminArea.bundle.js:1)
at eval (index.jsx:1)
at Object.<anonymous> (adminArea.bundle.js:1)
at F (adminArea.bundle.js:1)
at adminArea.bundle.js:1
at adminArea.bundle.js:1

Looks like babel-polyfill is loading twice now. I would normally look at my webpack config. But this issue did not happen when I require the same React.js script directly (see commented code in the first posted code block)

1

I had a similar issue within WordPress a few days ago but it doesn't really have anything to do with WordPress. Simply put, your code is loading the babel-polyfill library twice somehow. Most commonly it can happen if you're using the library yourself and on top of that a third-party library is including that too.

The solution at Babel's Github worked out well for me.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.