Невозможно успешно скомпилировать компонент React в DOM ⇐ Javascript

[Anonymous]

Я пытаюсь интегрировать реагирование в существующий проект. Я начинаю с настройки простого компонента кнопки для начала. Проект представляет собой приложение Express, которое использует Handbarsjs для обработки представлений. Затем я импортирую этот выходной файл в свой скрипт main.js, который запрашивается с помощью основного представления макета. У меня нет ошибок в консоли браузера. Однако по какой-то причине компонент не отображается на странице. < /p>
Что я могу пропустить?
< /code>
main.js
import submitHandler from './form.js';
import button from './components/button.js';
import lottieInit from './animations/lottie-handler.js';
import ReactButton from '../../dist/bca-react-component-library/button.js';
import { createRoot } from 'react-dom/client';

function loadButton() {
const root = createRoot(document.getElementById('react-app'));
root.render(

);
console.log('rendered ReactButton');
}

window.addEventListener("load", runAllFunctions);

function runAllFunctions() {
submitHandler();
lottieInit();
button();
loadButton();
}
< /code>
button.js (скомпилирован) < /p>
export default function ReactButton() {
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", null, "click here"));
}
< /code>
button.js (pre-compile) < /p>
export default function ReactButton() {
return (

click here

);
}
< /code>
babel.config.json
// .babelrc or babel.config.json
{
"presets": ["@babel/preset-react"]
}


Подробнее здесь: https://stackoverflow.com/questions/797 ... t-into-dom