Unable to output successfully compiled react component into DOM

Question

I've trying to integrate react into an existing project. I'm starting by setting up a simple button component to get started. The project is an express app that uses handlebarsjs to handle the views.

I have created the jsx file with correct syntax and successfully compiled to an output file. I am then importing that output file into my main.js script which is requested by the main layout view.

I can see the successful compilation by babel in the dist directory. I don't have any errors in the browser console. however, for some reason the component is not rendered on the page.

What could I be overlooking?

main-layout.hbs

<script type="text/javascript" src="/js/main.js"></script>

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(
        <ReactButton />
    );
    console.log('rendered ReactButton');
}

window.addEventListener("load", runAllFunctions);

function runAllFunctions() {
    submitHandler();
    lottieInit();
    button();
    loadButton();
}

button.js (compiled)

export default function ReactButton() {
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", null, "click here"));
}

button.js (pre-compile)

export default function ReactButton() {
  return (
    <>
      <button>click here</button>
    </>
  );
}

babel.config.json

// .babelrc or babel.config.json
{
  "presets": ["@babel/preset-react"]
}

Edit: this is solve. As noted by @mukilan Palanichamy below, I needed to call the react library in my html.

Also in my case I needed to change the location I was storing my button component file at, to a directory that my express app was configured to serve web assets from. In this case under /public/.

Mukilan Palanichamy · Accepted Answer · 2025-09-08 05:55:37Z

3

Same issue I have faced in a past project. Need to include the React and ReactDOM libraries in your HTML. Your compiled code, which uses React.createElement and createRoot, can't work without them.

React: The core library that handles the components and their logic.
ReactDOM: The library that renders your components onto the web page.

ref Link:
1. https://legacy.reactjs.org/docs/cdn-links.html (Add these two <script> tags to your main-layout.hbs file.)
2. https://react.dev/learn/add-react-to-an-existing-project

edited Sep 8 at 5:55

answered Sep 8 at 5:52

Mukilan Palanichamy

312 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

kdub1312 Sep 8 at 11:03

logically this makes sense to me, as I am noticing that the imports in main.js to react and react-dom do not result in any script code added to the file in the browser however, if I apply this fix the component still does not render- do I need to make any update to my main.js to accommodate?

kdub1312 Sep 9 at 10:49

this did help solve my problem, thank you. In my case I also needed to change the location of my component file in the directory, to a location that my express app was configured to serve web files from (under /public/)

Collectives™ on Stack Overflow

Unable to output successfully compiled react component into DOM

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related