将Reaction脚本入队并挂钩其目标div时无法加载脚本

时间:2019-09-04 作者:Sean D

当我尝试将静态响应排入队列时,下面的代码出现无声故障。js脚本并将其注入div挂接到admin\\u页脚。我看到了页面和测试echo,以及脚本文件的url。但是React应用程序不在那里,基本上管理页面是空白的。

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\');
我怀疑在我学习wordpress的过程中出现了一个新手错误,但似乎看不到。有人看到这个问题吗?

更新我已将以下内容添加到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
看起来babel polyfill正在加载两次。我通常会查看我的网页配置。但当我需要同样的反应时,这个问题并没有发生。直接使用js脚本(请参阅第一个发布的代码块中的注释代码)

1 个回复
最合适的回答,由SO网友:Ram Ratan Maurya 整理而成

几天前,我在WordPress中遇到了类似的问题,但这与WordPress没有任何关系。简单地说,您的代码以某种方式加载了两次babel polyfill库。最常见的情况是,如果您自己使用该库,而且第三方库也包括该库,则会发生这种情况。

解决方案位于Babel\'s Github 对我来说很好。

相关推荐

当footer.php调用另一个文件时,我如何修改页脚?

我试图修改阿瑟姆的塔龙主题的页脚。我正在使用一个正常工作的儿童主题。我如何修改页脚时,页脚。php调用位于函数页脚中的函数。php?在页脚中。php,我有这个,我可以在子主题中修改它。 <footer id=\"colophon\" class=\"site-footer\" role=\"contentinfo\"> <div class=\"container\"> <div class=\"row\">