Блог

Я хочу использовать некоторые из моих компонентов React, которые я опубликовал в NPM, в моем плагине WordPress — я пытаюсь создать короткий код, который будет отображать компонент.

Я следую этому руководству и вношу коррективы:https://github.com/stcalica/wp-js-plugin-starter

В моем src/index.js у меня есть:

 import { AwesomeButton } from "react-awesome-button";
console.log("Start the engine!");
wp.element.render(<AwesomeButton  type="primary">Button</AwesomeButton>, document.getElementById('test-react'));
  

В моей консоли я получаю эту ошибку:

 Uncaught ReferenceError: createElement is not defined
  at Object.parcelRequire.Focm.react-awesome-button (index.js?ver=1554053763:17)
    at u (index.js?ver=1554053763:1)
    at parcelRequire.J4Nk (index.js?ver=1554053763:1)
    at index.js?ver=1554053763:1
  

Я полагаю, это связано с тем, что версия React для WordPress не может понять синтаксис AwesomeButton. Есть способы обойти это? Нужно ли мне выполнить дополнительную настройку с моим babel?

ДРУГИЕ МОИ КОНФИГУРАЦИОННЫЕ ФАЙЛЫ:

Вот мой .babelrc :

 {
  "presets": ["@wordpress/default"]
}
  

Вот основной php-файл моего плагина:

 function wp_js_plugin_starter_url( $path ) {
    return plugins_url( $path, __FILE__ );
}

/**
 * Registers the plugin's script.
 *
 * @since 1.0.0
 */
function wp_js_plugin_starter_register_script() {
    wp_register_script(
        'wp-js-plugin-starter',
        wp_js_plugin_starter_url( 'dist/index.js' ),
        array()
    );
}

/**
 * Enqueues the plugin's script.
 *
 * @since 1.0.0
 */
function wp_js_plugin_starter_enqueue_script() {
    wp_enqueue_script( 'wp-js-plugin-starter' );
}

/**
 * Trigger the script registration on init.
 */
//add_action( 'init', 'wp_js_plugin_starter_register_script' );

/**
 * Enqueue the script in all admin pages
 */
add_action('wp_enqueue_scripts', 'my_enqueue_plugin_js' );

function my_enqueue_plugin_js() {
    wp_enqueue_script(
      'wp-js-plugin-starter',
      wp_js_plugin_starter_url( 'dist/index.js' ),
      ['wp-element'],
      time(), // Change this to null for production
      true
    );
}
//add_action( 'admin_enqueue_scripts', 'wp_js_plugin_starter_enqueue_script' );
add_shortcode('test', 'test');
/**
 * Return the link to the class textbook.
 */
function test() {
    return '<div id="test-react"></div>';
}
  

Я забыл импортировать функции createElement и render из wp.element , которая является библиотекой React WordPress.