1

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.com/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.

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
    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
    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. 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 Jul 30, 2019 at 22:56

1 Answer 1

1

According to https://github.com/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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.