Support » Developing with WordPress » React plugin page not rendering (Empty div)

  • Wanderson Silva

    (@wandersoncs)


    Hello! Trying to create a custom plugin to render a React app, but can’t make it work. The app i am trying to render is this:

    https://www.bootstrapdash.com/demo/azia-react-free/template/preview/dashboard

    I have created the main file of the plugin with the following code:

    <?php
    /**
     * Plugin Name: Dashboard React
     * Description: Plugin para mostrar dashboard - Use o shortcode em página ou post -> [dashboard-react]
    * Author: Canal Solar
    * Author URI: 
    * Version: 0.1
     */
    
     if ( ! defined( 'ABSPATH' ) ) {
    	exit; // Exit if accessed directly.
    }
    
    function dashboard_react() {
    
    	return '<div id="root"></div>';
    }
    
    add_shortcode('dashboard-react', 'dashboard_react');
    
    function dashboard_react_assets() {
    	
    	$react_app_js  = plugin_dir_url( __FILE__ ) . 'dashboard-react/build/static/js/main.aab11633.js';
        $react_app_css = plugin_dir_url( __FILE__ ) . 'dashboard-react/build/static/css/main.2ded1f9a.css';	
          
        // time stops stylesheet/js caching while in development, might want to remove later  
        $version = time();	
        wp_enqueue_script( 'dashboard-react', $react_app_js, array(), $version, true );         
        wp_enqueue_style( 'dashboard-react', $react_app_css, array(), $version );
    }
    
    add_action( 'wp_enqueue_scripts', 'dashboard_react_assets' );

    But i am getting an empty root div and no erros in the Console. What am i doing wrong? Thanks in advance.

    NOTICE: i am building this localy.

    UPDATE: Just notice that my plugin is causing the Invalid JSON Response Error when i try to update a page or post 🙁
    The debug shows nothing and still no errors in the console. Any help will be much appreciated.

  • You must be logged in to reply to this topic.