Импорт модулей NPM в плагин Wordpress ReactJS - PullRequest
Новая
       14

Импорт модулей NPM в плагин Wordpress ReactJS

0 голосов
/ 31 марта 2019

Я хочу использовать некоторые из моих компонентов 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. Есть ли способы обойти это? Нужно ли мне сделать еще некоторые настройки с моей бабелкой?

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

Вот мой .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>';
}

1 Ответ

0 голосов
/ 01 апреля 2019

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

...