Solution 1 :

UPDATE: After a bit of research importing modules between several <script> tags is now possible.

This can be achieved adding the Babel Plugin attribute data-plugins and setting the value to "transform-es2015-modules-umd" which will enable the UMD pattern.

You’ll also need to set type="text/babel" on each <script> tag.

This will allow you to use the import statements directly inside each file. Like this:

<!DOCTYPE html>
<html lang="en">

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src=""></script>
  <script src=""></script>
  <script src=""></script>

  <div id="root"></div>

  <script data-plugins="transform-es2015-modules-umd" type="text/babel" src="./Header.js"></script>
  <script data-plugins="transform-es2015-modules-umd" type="text/babel" src="./App.js"></script>


Working Gist Example

Problem :

I am trying to inject some React code into an HTML document. I am following React’s own documentation and feeding their starter code (a simple like button) into the page. Everything was working great. I changed it to use JSX, changed it to a functional component using hooks instead of a class component with state. No problems.

However, whenever I include an import call and try to bring in another component, the component breaks on the page and stops displaying, but doesn’t throw any kind of error I can see.

How do I develop in a “react-y” way with components and modularity while injecting it into an html page?

Here is the code I’m working with at the moment:

HTML document

  <div id="react-root"></div>

  <!-- inject react, reactDOM and JSX engine -->
  <script src="" crossorigin></script>
  <script src="" crossorigin></script>
  <script src=""></script>

  <!-- point to component -->
  <script src="transpiled/app.js"></script>

React Component

'use strict';
import {SecondComponent} from './components/SecondComponent';

const e = React.createElement;

const LikeButton = () => {
  const [liked, setLiked] = React.useState(false);

  if (liked) return 'You liked this functional component.'

  const handleLikeClick = () => {

  return (
      <button onClick={handleLikeClick}>new like button with jsx</button>
      {liked && <SecondComponent/>}

const domContainer = document.querySelector('#react-root');
ReactDOM.render(e(LikeButton), domContainer);

Like I said, any sort of import statement seems to be where it breaks. Can’t find resources online about it. Thanks in advance for your help!


Comment posted by Juan Marco

If I understood correctly, you’re trying to use a regular

Comment posted by Nick Burczyk

Yes, that is correct

Comment posted by Arnaud Claudel

Have you tried with