So I’m trying to create a WordPress Plugin using ReactJS. However, when I try to display my ReactJS app that I built with npm run build, my WordPress menu doesn’t show anything.

This is the code responsible for displaying what’s in the index.html file generated:

<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);

// admin/pages/dashboard.php

function qw_dashboard_page() {
    ?>
    <div class="wrap">
        <h1>Welcome to WP Wizard</h1>
        <iframe src="<?php echo esc_url(WP_WIZARD_DIST_URL . 'index.html'); ?>" width="100%" height="600px" frameborder="0"></iframe>
    </div>
    <?php
}

However, it doesn’t display anything after the h1 welcome message. I’ve checked the route and it’s correct. I’m using Vite to create the React app, and it generated the files in a `dist` folder that I copied and pasted into my WP Plugin root directory. Is there something wrong with the build? Do I need to make advanced configurations in my `vite.config.js` file? Here’s what that file looks like so far:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
})

Integrate ReactJS with WordPress Plugin