React JSX in Wordpress Plugin Development

admin管理员组

文章数量:1416050

I was able to get React working in my custom Wordpress Plugin but I forgot how I got it working. What I'm trying to do is use a react component I have in NPM and use it as a Wordpress plugin.

I used npm to install my component from NPM.

my-custom-plugin.php:

function wp_enqueue_react() {
   wp_enqueue_script('subreddit-posts',
    plugin_dir_url( __FILE__ ) . 'js/node_modules/react-subreddit-posts/build/index.js',
    ['wp-element'],
    '1.0',
    false
    );

    wp_enqueue_script(
      'wp-react-subreddit-posts',
      plugin_dir_url(__FILE__) . 'js/index.js',
      ['wp-element'],
    '1.0',
      true
    );


}

function subreddit_posts() {
    return '<div id="subreddit"></div>';
}

add_shortcode('subreddit_posts', 'subreddit_posts');
add_action( 'wp_enqueue_scripts', 'wp_enqueue_react' );

my index.js which is pulled in:

const { createElement, render } = wp.element;
console.log('script is running');

wp.element.render(
  wp.element.createElement(SubredditPosts, {
    subreddit: "aww",
    display: "gallery",
    placeholder: ".jpg",
    width: "250px",
    height: "300px"
    },
    null), document.getElementById('subreddit')
  );

My console log shows. But I get this error:

Uncaught ReferenceError: module is not defined
Uncaught ReferenceError: SubredditPosts is not defined

module seems to be the react.production.min.js file brought in by wp-element I believe.

Like I said I was able to get this working a few months ago but made some changes and broke something.

It seems logical to have the JS file with JSX to build with babel/webpack, but I don't remember having to use webpack or anything to build but I might be forgettin.

I was able to get React working in my custom Wordpress Plugin but I forgot how I got it working. What I'm trying to do is use a react component I have in NPM and use it as a Wordpress plugin.

I used npm to install my component from NPM.

my-custom-plugin.php:

function wp_enqueue_react() {
   wp_enqueue_script('subreddit-posts',
    plugin_dir_url( __FILE__ ) . 'js/node_modules/react-subreddit-posts/build/index.js',
    ['wp-element'],
    '1.0',
    false
    );

    wp_enqueue_script(
      'wp-react-subreddit-posts',
      plugin_dir_url(__FILE__) . 'js/index.js',
      ['wp-element'],
    '1.0',
      true
    );


}

function subreddit_posts() {
    return '<div id="subreddit"></div>';
}

add_shortcode('subreddit_posts', 'subreddit_posts');
add_action( 'wp_enqueue_scripts', 'wp_enqueue_react' );

my index.js which is pulled in:

const { createElement, render } = wp.element;
console.log('script is running');

wp.element.render(
  wp.element.createElement(SubredditPosts, {
    subreddit: "aww",
    display: "gallery",
    placeholder: "http://www.codeisdead/img/profile/Kyle.jpg",
    width: "250px",
    height: "300px"
    },
    null), document.getElementById('subreddit')
  );

My console log shows. But I get this error:

Uncaught ReferenceError: module is not defined
Uncaught ReferenceError: SubredditPosts is not defined

module seems to be the react.production.min.js file brought in by wp-element I believe.

Like I said I was able to get this working a few months ago but made some changes and broke something.

It seems logical to have the JS file with JSX to build with babel/webpack, but I don't remember having to use webpack or anything to build but I might be forgettin.

• plugins
• plugin-development
• javascript
• wp-enqueue-script
• wp-register-script

Share Improve this question asked Jul 30, 2019 at 5:30 Kyle Calica-StKyle Calica-St 6011 silver badge1313 bronze badges 4

• 2 I'm guessing you've not properly built the source: react-subreddit-posts/build/index.js. And you've not loaded SubredditPosts from js/index.js? – Sally CJ Commented Jul 30, 2019 at 5:50
• Did you run build command on npm? In the production, we don't access node_modules folder as I know so far. – idpokute Commented Jul 30, 2019 at 14:03
• Yeah, this is where I'm confused a bit. We enqueue the file so it is available but if I try to import it, it causes problems. Am I suppose to build the file as a normal react project? I've been following a few tutorials but they've all been very different. I'm really trying to use the wp-element Wordpress library which includes react. – Kyle Calica-St Commented Jul 30, 2019 at 16:18
• 1 Yes, solved it! Okay so I DO need to build the project first. This project is about taking npm hosted components and converting them into usable items in Wordpress. I believe I found a way to do it. I'll have my answer here and probably write a blog post about it. Thank you everyone! And thanks again @SallyCJ second post you've helped me on this week I believe – Kyle Calica-St Commented Jul 30, 2019 at 22:56

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

According to https://github/radekzz/wordpress-react-in-theme, you can just include script as Babel type, not JavaScript if you don't want to use webpack to print JSX. But in this case your code will not be compiled.

本文标签： React JSX in Wordpress Plugin Development