React not loading on suer edit page

How do you integrate your scripts into the backend? Do you also use the dependencies as generated by npm? An example would be great.

Hi @threadi ,
Thank you for your reply.

// this is the index.js
import { CourseBuilder, LessonsList, UserSettings, UserProfile } from './components';
import React from "react"
import ReactDOM from "react-dom"
import domReady from '@wordpress/dom-ready';
import { createRoot } from '@wordpress/element';

domReady( () => {

  const courseBuilderRoot = document.querySelector("#course-builder-root");

  if(courseBuilderRoot) {
    const courseRoot = createRoot(courseBuilderRoot);
    courseRoot.render(<LessonsList />);
  }

  const studentBuilderRoot = document.querySelector("#student-builder-root");
  if (studentBuilderRoot) {
    const studentRoot = createRoot(studentBuilderRoot);
    studentRoot.render(<UserSettings />);
  }

} );

// this is the index.js
import { CourseBuilder, LessonsList, UserSettings, UserProfile } from './components';
import React from "react"
import ReactDOM from "react-dom"
import domReady from '@wordpress/dom-ready';
import { createRoot } from '@wordpress/element';

domReady( () => {

  const courseBuilderRoot = document.querySelector("#course-builder-root");

  if(courseBuilderRoot) {
    const courseRoot = createRoot(courseBuilderRoot);
    courseRoot.render(<LessonsList />);
  }

  const studentBuilderRoot = document.querySelector("#student-builder-root");
  if (studentBuilderRoot) {
    const studentRoot = createRoot(studentBuilderRoot);
    studentRoot.render(<UserSettings />);
  }

} );

//down below is the code that goes to functions.php
function display_courses_with_checkboxes($user) {
    $enrolled_courses_ids = learndash_user_get_enrolled_courses($user->ID);

    if (!empty($enrolled_courses_ids)) {
        echo '<h3>Show Solutions for LearnDash Courses</h3>';
        echo '<div id="student-builder-root"></div>';

    }

    wp_enqueue_style( 'wp-components' );

}
add_action('show_user_profile', 'display_courses_with_checkboxes');
add_action('edit_user_profile', 'display_courses_with_checkboxes');

I don’t see in the code that the JavaScript file is included anywhere? You are only loading the styles for WP-React Components, nothing more. You would have to use wp_enqueue_script() somewhere to load your script.

@threadi yes, the code is down below.

function boilerplate_load_assets() {
  wp_enqueue_script('mainjs', get_theme_file_uri('/build/index.js'), array('wp-element', 'wp-dom-ready'), '1.0', true);
  wp_enqueue_style('maincss', get_theme_file_uri('/build/index.css'));
}

add_action('admin_enqueue_scripts', 'boilerplate_load_assets');

Add react to the dependencies. For example:

  wp_enqueue_script('mainjs', get_theme_file_uri('/build/index.js'), array('react', 'wp-element', 'wp-dom-ready'), '1.0', true);

Also note that your handle is very general (“mainjs”). I would recommend using the plugin name or something custom here. For one of my plugins, the dependencies are set like this:

 wp_enqueue_script('my-plugin-name', get_theme_file_uri('/build/index.js'), array('react', 'wp-components'), '1.0', true);

So I added the dependencies, but the issue is still there.
The libraries are not loading.

Here is the controls.jsx file

import { __ } from '@wordpress/i18n';
import {
	TextareaControl,
	ToggleControl,
} from '@wordpress/components';

const MessageControl = ( { value, onChange } ) => {
	return (
		<TextareaControl
			label={ __( 'Message', 'demnme-learning' ) }
			value={ value }
			onChange={ onChange }
			__nextHasNoMarginBottom
		/>
	);
};

const DisplayControl = ( { value, onChange, label } ) => {
	return (
		<ToggleControl
			checked={ value }
			label={ label }
			onChange={ onChange }
			__nextHasNoMarginBottom
		/>
	);
};

const DisplayControlCheck = ({ value, onChange, label }) => {
  return (
    <div className="custom-toggle-control">
      <label>
        {label}
        <input
          type="checkbox"
          checked={value}
          onChange={onChange}
          style={{ marginLeft: '8px' }}
        />
      </label>
    </div>
  );
};

export { MessageControl, DisplayControl, DisplayControlCheck };

What is really weird is that the same component works fine on the LearnDash course page, but on user edit page is broken.

This is not so unusual if LearnDash loads the required React components, but WordPress does not by default.

What does your wp_enqueue_script() specification currently look like? Since a component is currently missing, it might make sense to adjust the dependency as I have described above. E.g. like this:

wp_enqueue_script('mainjs', get_theme_file_uri('/build/index.js'), array('react', 'wp-components'), '1.0', true);

@threadi

Thank you so much; it worked!

Now the components are loading as they should.

Nice if I could help. You are welcome to set the topic to solved.