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)

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)

• actions
• wp-enqueue-script
• admin-menu
• footer
• wp-register-script

• 1 Registering and localizing don't actually enqueue the script. Make sure you also call wp_enqueue_script() as in the Codex localize example - codex.wordpress/Function_Reference/wp_localize_script – WebElaine Commented Sep 4, 2019 at 18:06
• Thank you, after enqueuing I see a new error (posted above under Update – Sean D Commented Sep 4, 2019 at 19:54

1 Answer 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.