mastodon/app/javascript/packs/admin.jsx

import './public-path';
import { createRoot } from 'react-dom/client';

import ready from '../mastodon/ready';

ready(() => {
  document.querySelectorAll('[data-admin-component]').forEach(element => {
    const componentName  = element.getAttribute('data-admin-component');
    const componentProps = JSON.parse(element.getAttribute('data-props'));

    import('../mastodon/containers/admin_component').then(({ default: AdminComponent }) => {
      return import('../mastodon/components/admin/' + componentName).then(({ default: Component }) => {
        const root = createRoot(element);

        root.render (
          <AdminComponent>
            <Component {...componentProps} />
          </AdminComponent>,
        );
      });
    }).catch(error => {
      console.error(error);
    });
  });
});