Creé un sitio con Node, Express y quiero agregar una página creada con React y JSX.

Instalé Babel como paquete npm y agregué React como un script como este en index.html:

 <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>

y módulo principal

 <script src="./js/Main.js"></script>

Mi pregunta es cómo importar correctamente un componente secundario en un componente principal.

Digamos que quiero importar './components/Message.js' en 'Main.js' así

 function Main() { return ( <div> <h1>Hello World</h1> <Message /> </div> ) } const renderDiv = document.getElementById('chat-module') ReactDOM.render(<Main />, renderDiv)

para hacer esto, necesito importar Message.js a Main.js, pero import Message from 'components/Message' da Uncaught SyntaxError: Cannot use import statement outside a module .

La única solución que he encontrado hasta ahora es agregar Message.js como script en index.html y llamarlo desde Main.js como window.Message

¿Es esta la única solución disponible o existe una forma más adecuada y eficiente de conectar estos componentes?

Nota: Como recordatorio, no estoy usando npx create-react-app. Esta es una aplicación existente construida con express.